offset 、client 、scroll 三大系列总结

offset 系列

 let father = document.querySelector('.father');
 let son = document.querySelector('.son');

1.可以得到元素的偏移位置 , 返回的不带单位的数值

 console.log(father.offsetTop);
 console.log(father.offsetLeft);

它以带有定位的父亲为准 如果么有父亲或者父亲没有定位 则以 body 为准。
console.log(son.offsetLeft);

2.可以得到元素的大小 宽度和高度 是包含padding + border + width。

 var w = document.querySelector('.w'); 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);

3.返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); 返回父亲 是最近一级的父亲 ，不管父亲有没有定位。

client 系列

let div = document.querySelector(‘div’);
console.log(div.clientWidth);等等。

scroll系列

let div = document.querySelector('div');

div.addEventListener('scroll', function() {
            console.log(div.scrollTop);
        })

scroll滚动事件当我们滚动条发生变化会触发的事件;
输出的值是被滚走内容的 高度。
scrollHeight 、scrollWidth。

三大系列大小对比：
element.offsetWidth ：返回自身包括padding、边框、内容区的宽的。
element.clientWidth ：返回自身包括padding、内容区的宽度，不包含边框。
element.scrollWidth ：返回自身实际宽度，不含边框。
三者返回数组都不带单位。

三者主要用法：
1.offset系列经常用于获得元素位置 offsetLeft 、 offsetTop
2.client系列常用于获取元素大小 clientWidth 、clientHeight
3.scroll经常用于获取滚动距离 scrollTop 、scrollLeft
4.注意页面滚动的距离通过window.pageXOffset \ window.pageYOffset 获得。