JS pc端网页特效

offset

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

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

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

    注意 返回的数值不带单位

 

 

offset常用的属性

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

     <div class="box1"></div>
     <script>
         var box = document.querySelector('.box1')
         console.log(box.offsetTop);
         console.log(box.offsetLeft);
         console.log(box.offsetWidth);
         console.log(box.offsetHeight);
         console.log(box.offsetParent);
     </script>

offset与style区别

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

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

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

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

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

案例

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

css代码

 .box {
             width: 200px;
             height: 200px;
             background-color: pink;
             position: absolute;
             left: 100px;
             top: 100px;
         }

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

效果图