Offset,Scroll和Client三大系列总结

Offset,Scroll和Client三大系列总结

offset系列	scroll系列	client系列
offsetWidth	scrollWidth	clientWidth
offsetHeight	scrollHeight	clientHeight
offsetLeft	scrollLeft	clientLeft
offsetTop	scrollTop	clientTop
offsetParent	—	—

• Offset系列

说明:
@ offsetWidth和offsetHeight: width/height + padding + border;
@ offsetParent: 有定位的上一级父盒子,如果都没有定位会一直找到body
@ offsetTop和offsetLeft: 是盒子的border到上一级定位父盒子(也就是offsetParent)的距离

• Scroll系列

说明:
@ scrollWidth和scrollHeight: 盒子内容的宽和高,即 width + padding 不包含 border;
@ scrollTop和scrollLeft: 内容被页面卷去的距离;

• Client系列

说明:
@ clientWidth和clientHeight: width + padding 不包含border;
@ clientTop和clientLeft: clientTop和clientLeft没什么用
他们就是borderTop和borderLeft（如果有滚动条会包含滚动条的宽度,但是一般情况下滚动条在右边和下面！）

• offsetHeight,scrollHeight和clientHeight的区别

说明:
@ clientWidth和clientHeight：
偏移offsetWidth: width + padding + border
卷曲scrollWidth: width + padding 不包含border 内部内容的大小
可视clientWidth: width + padding 不包含border

就先总结到这里吧~