Offset,Scroll和Client三大系列总结
offset系列 | scroll系列 | client系列 |
---|---|---|
offsetWidth | scrollWidth | clientWidth |
offsetHeight | scrollHeight | clientHeight |
offsetLeft | scrollLeft | clientLeft |
offsetTop | scrollTop | clientTop |
offsetParent | — | — |
说明:
@ offsetWidth和offsetHeight: width/height + padding + border;
@ offsetParent: 有定位的上一级父盒子,如果都没有定位会一直找到body
@ offsetTop和offsetLeft: 是盒子的border到上一级定位父盒子(也就是offsetParent)的距离
说明:
@ scrollWidth和scrollHeight: 盒子内容的宽和高,即 width + padding 不包含 border;
@ scrollTop和scrollLeft: 内容被页面卷去的距离;
说明:
@ clientWidth和clientHeight: width + padding 不包含border;
@ clientTop和clientLeft: clientTop和clientLeft没什么用
他们就是borderTop和borderLeft(如果有滚动条会包含滚动条的宽度,但是一般情况下滚动条在右边和下面!)
说明:
@ clientWidth和clientHeight:
偏移offsetWidth: width + padding + border
卷曲scrollWidth: width + padding 不包含border 内部内容的大小
可视clientWidth: width + padding 不包含border
就先总结到这里吧~