offsetLeft,Left,clientLeft详解

背景
最近写了一个滑动条，发现自己的对offsetLeft,Left,clientLeft这几个的概念还不是很清楚，于是决定细细研究下。

分类

client部分
clientHeight:内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线，会随窗口的显示大小改变)
clientLeft,clientTop: 这两个返回的是元素周围边框的厚度（border）,如果不指定一个边框或者不定位改元素,他的值就是0.

offset部分
计算时都包括此对象的border，padding
offsetLeft：获取对象左侧与定位父级之间的距离
offsetTop：获取对象上侧与定位父级之间的距离
PS：获取对象到父级的距离取决于最近的定位父级
offsetWidth：获取元素自身的宽度（包含边框）
offsetHeight：获取元素自身的高度（包含边框）
注：与style.top 不同，offsetLeft只可读，不可以对其进行赋值。offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

scroll部分
scrollLeft：设置或获取当前左滚的距离，即左卷的距离；
scrollTop：设置或获取当前上滚的距离，即上卷的距离；
scrollHeight：获取对象可滚动的总高度；
scrollWidth：获取对象可滚动的总宽度；
scrollHeight = content + padding；（即border之内的内容）

作者：鹿鹿鹿啦
来源：CSDN
原文：https://blog.csdn.net/l354002675/article/details/79575210
版权声明：本文为博主原创文章，转载请附上博文链接！