前言
offsetHeight、offsetWidth、offsetLeft、offsetTop
clientHeight、clientWidth、clientLeft、clientTop
scrollHeight、scrollWidth、scrollLeft、scrollTop
这些获取元素位置的属性可以帮助我们完成像图片懒加载、下拉触底加载更多等场景。但对我而言，我知道他们都是获取距离的，但是不清楚它们之间的具体区别。下面我们结合图片和文字来重新认识一下这些似曾相识的属性。
offset系列
offset翻译过来就是偏移量，我们借助offset的相关属性可以动态的得到目标元素的位置、大小信息。
常用属性如下
| 属性 | 作用 |
|---|---|
| element.offsetParent | 返回作用该元素带有定位的父级元素 如果父级元素都没有定位则返回body |
| element.offsetTop | 返回当前元素距离带有定位的父元素上方的距离（如果无父元素或者父元素无定位则返回body的距离） |
| element.offsetLeft | 返回当前元素距离带有定位的父元素左边的距离（如果无父元素或者父元素无定位则返回body的距离） |
| element.offsetWidth | 返回模板元素的宽度（padding+border+自身宽度） |
| element.offsetHeight | 返回模板元素的高度（padding+border+自身高度） |
注意：通过以上方法获取的数据均不带单位
当父元素具有定位时，offsetTop和offsetLeft表现形式如下
offset和style的区别
通过element.style同样可以获取到元素的宽高属性，那么style和offset有什么区别呢
| offset的特点 | style的特点 |
|---|---|
| offset可以得到任意样式表中的样式值 | style只能得到行内样式表中的样式值 |
| offset系列获得的数值是没有单位的（数值） | style.widht获取到的值是具有单位的（100px 字符串） |
| offsetWidth等属性是只读的 | style.width的属性是可赋值的 |
| offsetWidth包含padding+border+width | style.widht不包含padding和border |
通过以上总结可得，当我们想要获取元素大小位置时，使用offset更合适
当我们想要改变元素的相关属性时，使用style更为合适
client系列
使用client相关属性也可以获取到元素可视区的相关信息。常用的属性如下
| client系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回元素宽度（padding+width） |
| element.clientHeight | 返回元素高度（padding+height） |
通过上方属性可知，client与offset的主要区别就是clientWidth和clientHeight返回的值不包括border。 专门提供了clientTop和clientLeft这两个属性来获取边框的相关信息
Scroll系列
scroll系列的相关属性在开发中也经常会用到，动态的获取元素的大小，滚动距离。通常我们会监听元素的滚动事件来获取scroll属性。
| scroll系列属性 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上侧距离(可修改) |
| element.scrollleft | 返回被卷去的左侧距离(可修改) |
| element.scrollWidth | 返回自身实际的宽度，不含边框 |
| element.scrollHeight | 返回自身实际宽度，不含边框 |
图解
offset、client、scroll相关属性总结
-
offset系列经常用于获取元素的位置 offsetLeft offsetTop
-
scroll经常用于获取滚动距离 scrollTop scrollLeft
-
client经常用于获取元素大小 clientWidth clientHeight
-
想要修改元素的大小相关属性时，使用style直接修改
