offset的使用

1、offsetTop

他就是自身与最近的带定位的一个元素的距离，如果没有定位的元素，那即是body

求自身的大小

offsetWidth = padding + border + width    返回的数据是数字 并且不能赋值

offsetHeight = padding + border + height   

offsetParent用于返回代定位的父亲，否则返回body

如果使用style.width  得到的宽度是字符串   220px

2、实例求出鼠标在盒子中的位置

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

3、clientHeight  不带变宽的高度  padding + height

clientLeft左边框的宽度

clientTop 上边框的宽度

4、实例

    var div = document.querySelector("div")        // mousedown, 鼠标按下        div.addEventListener("mousedown", function(e) {            console.log(e)            var x = e.pageX - this.offsetLeft; 鼠标在盒子内的坐标            var y = e.pageY - this.offsetTop;            function move(e) {                console.log(e)                div.style.left = e.pageX - x + "px"  盒子移动后的位置  得到的就是盒子距离window边上的距离                div.style.top = e.pageY - y + "px"            }            window.addEventListener("mousemove", move)             // 需要注意的是:            window.addEventListener("mouseup", function() {                window.removeEventListener("mousemove", move)            })        })

5、scroll家族

window.scrollTop  页面滚动进去的高度

6、匀速运动动画

    <script>        // 1.获取box dom元素 2.left增加 3.setInterval 4.400  5.clearInterval        var box = document.querySelector(".box")        var left = 0;        // 匀速运动！！！        var timer = setInterval(function() {            left += 10   距离加10            if(left >= 400) {                clearInterval(timer)            }            box.style.left =  left + "px"        }, 50)    </script>