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>

 效果图