JS pc端网页特效

    offset

    offset翻译就是偏移量，可以使用他相关的属性可以动态的得到该元素的位置、大小等等

    获得元素距离带有定位父元素的位置

    获得元素自己的大小(宽度高度)

    注意 返回的数值不带单位

 

 

  offset常用的属性

1.     element.offsetTop() 返回元素上方到带有定位的父元素距离
2.     element.offsetLeft() 返回元素左边到带有定位的父元素距离
3.     element.offsetWidth() 返回元素的宽度
4.     element.offsetHeight() 返回元素的高度
5.     element.offsetParent() 返回该元素带有定位的父元素 如果父元素都没有定位就返回body

1     <div class="box1"></div>
2     <script>
3         var box = document.querySelector('.box1')
4         console.log(box.offsetTop);
5         console.log(box.offsetLeft);
6         console.log(box.offsetWidth);
7         console.log(box.offsetHeight);
8         console.log(box.offsetParent);
9     </script>

    offset与style区别

    offset可以得到任意样式中的元素值,style只能得到行内样式中的样式值

    offset获取的数值不带单位,style获取的数值是带单位的

    offsetWidth 包含padding,border,width ,style.width 不包含padding和border的值

    offsetwidth 属性是只读属性,只能获取不能赋值,style.width是可以修改属性的值的

1     <script>
2         var box = document.querySelector('.box1')
3         console.log(box.offsetWidth);
4         console.log(box.style.width);
5     </script>

案例

获取鼠标在盒子里面的坐标

css代码

1 .box {
2             width: 200px;
3             height: 200px;
4             background-color: pink;
5             position: absolute;
6             left: 100px;
7             top: 100px;
8         }

1     <div class="box"></div>
2     <script>
3         var box = document.querySelector('.box')
4         box.addEventListener('mousemove', function (e) {
5             var x = e.pageX - this.offsetLeft;
6             var y = e.pageY - this.offsetTop;
7             this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
8         })
9     </script>