在长时间的工作中，关注了很多工程化的东西。
导致一些js里面的基本概念都有些模糊了，现在来温习一下。
网上有很多相关文章，总结了一下。
- client
clientHeight:内容可视区域的高度，也就是说页面浏览器中科院看到内容区域的高度(不含边框，也不含滚动条等边线，会随着窗口显示大小改变)。
clientLeft,clientTop: 这两个返回的是元素周围边框的厚度（border）,如果不指定一个边框或者不定位改元素,他的值就是0.
2.offset
计算时都包括此对象的border，padding
offsetLeft：获取对象左侧与定位父级之间的距离
offsetTop：获取对象上侧与定位父级之间的距离
PS：获取对象到父级的距离取决于最近的定位父级
offsetWidth：获取元素自身的宽度（包含边框）
offsetHeight：获取元素自身的高度（包含边框）
注：与style.top 不同，offsetLeft只可读，不可以对其进行赋值。offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
croll
scrollLeft：设置或获取当前左滚的距离，即左卷的距离；
scrollTop：设置或获取当前上滚的距离，即上卷的距离；
scrollHeight：获取对象可滚动的总高度；
scrollWidth：获取对象可滚动的总宽度；
scrollHeight = content + padding；（即border之内的内容）
image.png
网友评论