区分clientHeight、scrollHeight、offsetHeight

最新推荐文章于 2025-05-29 15:40:25 发布

xm2by

最新推荐文章于 2025-05-29 15:40:25 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： clientHeight offsetHeight scrollHeight

本文链接：https://blog.youkuaiyun.com/XuM222222/article/details/81874277

javascript 专栏收录该内容

72 篇文章

订阅专栏

本文详细解析了DOM元素的clientHeight、offsetHeight和scrollHeight属性的区别。clientHeight包括内容高度和padding，但不包含border和滚动条。offsetHeight则包括内容、padding、border以及滚动条。scrollHeight表示的是元素内容实际高度，当子元素高度大于元素本身时，它会包含子元素的高度和padding。总结了这三个属性在不同情况下的计算方式，并提供了示例代码进行说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区分clientHeight、scrollHeight、offsetHeight

clientHeight、offsetHeight、scrollHeight都是用来描述DOM元素的高度的属性；对于同一个元素，它们分别表示的高度值会有所不同。具体如下：

clientHeight：

只读属性，所表示的元素高度包括：元素的内容高度（如果有下滚动条，需减去下滚动条的高度，下滚条默认高度为17px）+上下padding；不包括上下border、上下margin、下滚动条高度（如果元素有下滚动条，则clientHeight表示的高度不包含下滚动条）。

offsetHeight：

只读属性，所表示的元素高度包括：元素的内容高度（如果有下滚动条，需减去下滚动条的高度，下滚条默认高度为17px）+上下padding+上下border+下滚动条高度（如果元素有下滚动条，则offsetHeight表示的高度包含下滚动条）；不包括上下margin；我们通过css设置的高度、上下padding、上下border组成了offsetHeight的值。

scrollHeight：

只读属性，如果元素内的子元素高度大于该元素，scrollHeight所表示的元素高度为：元素内子元素的高度+该元素的上下padding；如果元素内的子元素高度小于该元素，scrollHeight所表示的元素高度为：该元素的内容高度（如果有下滚动条，需减去下滚动条的高度，下滚条默认高度为17px）+该元素的上下padding，此时，与clientHeight在数值上相等。

下面两个demo可以很好地证明以上表述：

demo1（如果元素内的子元素高度大于该元素）：

html

<div class="container">
    <div class="box"></div>
</div>

.container{
    overflow: auto;
    width: 1000px;
    height: 500px;
    padding: 20px 40px;
    border: 10px dashed #f44336;
    margin: 30px 40px;
    background: #ffeb3b;
}
.box{
    width: 500px;
    height: 2000px;
    background: #2196f3;
}

这里写图片描述

demo2（如果元素内的子元素高度小于该元素）：

html

<div class="container">
    <div class="box"></div>
</div>

css(如果有下滚动条)

.container{
    overflow: scroll;
    width: 1000px;
    height: 500px;
    padding: 20px 40px;
    border: 10px dashed #f44336;
    margin: 30px 40px;
    background: #ffeb3b;
}
.box{
    width: 500px;
    height: 200px;
    background: #2196f3;
}

这里写图片描述

css(如果没有下滚动条)

.container{
    width: 1000px;
    height: 500px;
    padding: 20px 40px;
    border: 10px dashed #f44336;
    margin: 30px 40px;
    background: #ffeb3b;
}
.box{
    width: 500px;
    height: 200px;
    background: #2196f3;
}