告别clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop傻傻分不清楚

clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop,单凭字面意思,真是傻傻分不清,

clientHeight和offsetHeight

这两个属性和元素的滚动、位置没有关系,它代表元素的高度。

  • clientHeight:包括padding,但不包括boder、水平滚动条、margin的高度,对于inline的元素这个属性一直是0,单位px,只读元素。 image.png
  • offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。同样对于inline的元素这个属性一直是0,单位px,只读元素。 image.png

接下来讨论有滚动条时的情况,当本元素的子元素比本元素高,且本元素的overflow=scroll时候,本元素会scroll:

scrollHeight

因为父元素不想被子元素撑开而出现了滚动条,那么改属性代表的就是所有内容和内边距,包括不可见、溢出以及被适口窗口遮挡的部分。 而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。 image.png

scrollTop

这个属性可以顾名思义,代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度,单位px,只读元素。。 image.png

offsetTop

当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。注意不要和scrollTop混淆,两者相对参考对象不同,offsetTop是子相对于父,而scrollTop完全是父自身滚动的距离; image.png

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×