js进阶Web APIs05---offset、client、scroll属性

offset

PS:

• 获得元素距离带有定位父元素的位置
• 元素的宽和高含：padding + border + width
• 返回的数值不带单位

注意区分：
（1）offsetParent与parentNode
①offsetParent：返回带有定位的父亲 否则返回的是body
②parentNode：返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位

（2）offset与style
A. offset
offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适
B. style
style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变

案例：获取鼠标在盒子内的坐标

<script>
    // 鼠标在页面中的坐标（ e.pageX, e.pageY）
    // 盒子在页面中的距离(box.offsetLeft, box.offsetTop)
    // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
    var box = document.querySelector('.box');
    box.addEventListener('mousemove', function(e) {
        // console.log(e.pageX);
        // console.log(e.pageY);
        // console.log(box.offsetLeft);
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
    })
</script>

client

scroll

总结：