搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

171 阅读 0 评论 113 点赞

我是靠谱客的博主坚强烤鸡，这篇文章主要介绍搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop，现在分享给大家，希望可以做个参考。

clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

clientHeight

offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

在这里插入图片描述

出现滚动条的情况，子元素高度/宽度大于父元素的时候会出现，然后子元素部分内容被隐藏。

scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。
在这里插入图片描述

scrollTop表示被隐藏部分的高度，在没有滚动条的时候scrollTop恒等于0

在这里插入图片描述

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
在这里插入图片描述

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。