什么是offsetHeight, clientHeight, scrollHeight?

想到解释什么是offsetHeight, clientHeight和scrollHeight或offsetWidth, clientWidth和scrollWidth之间的区别?

在客户端工作之前，必须了解这个区别。否则他们的一半生命将花在修复UI上。

小提琴，或内联如下:

当前回答

我对这三种类型的描述如下:

offsetHeight:父元素的“相对定位”空间被元素占用了多少。(即。它忽略了元素的位置:绝对后代) clientHeight:与offset-height相同，只是它不包括元素本身的边框、边距和其水平滚动条的高度(如果有的话)。 scrollHeight:在不滚动的情况下查看所有元素的内容/子代(包括位置:绝对子代)需要多少空间。

还有:

getBoundingClientRect()。height:与scrollHeight相同，除了它是在应用元素的css转换之后计算的。

2019-10-29 20:22:19

其他回答

要了解其中的区别，你必须了解盒子模型，但基本上:

clientHeight:

返回元素的内部高度(以像素为单位)，包括填充，但不包括水平滚动条高度、边框或边距

offsetHeight:

是一个包括元素边框、元素垂直填充、元素水平滚动条(如果存在，如果呈现)和元素CSS高度的测量值。

scrollHeight:

是一个元素的内容高度的测量，包括内容不可见的屏幕上由于溢出

我会让它更简单:

考虑:

<element>                                     
    <!-- *content*: child nodes: -->        | content
    A child node as text node               | of
    <div id="another_child_node"></div>     | the
    ... and I am the 4th child node         | element
</element>

scrollHeight:整个内容和填充(可见或不可见) 所有内容的高度+填充，不管元素的高度。

clientHeight:可见内容和填充仅可见高度:内容部分受显式定义的元素高度限制。

offsetHeight:可见内容和填充+边框+滚动条文档中元素所占的高度。

2014-03-26 23:55:24

Offset意为“某物偏离直线的数量或距离”。边距或边框是使HTML元素的实际高度或宽度“出线”的东西。它会帮助你记住:

offsetHeight是元素CSS的像素度量值高度，包括边框，填充和元素的水平滚动条。

另一方面，clientHeight可以说是OffsetHeight的相反。它不包括边界或边缘。它确实包括填充，因为它是驻留在HTML容器内的东西，所以它不算作额外的测量，如边距或边框。所以:

clientHeight属性返回一个元素的可见高度像素，包括填充，但不包括边框、滚动条或边距。

ScrollHeight是所有可滚动的区域，所以你的滚动永远不会超过你的边距或边框，这就是为什么ScrollHeight不包括边距或边框，但填充有。所以:

scrollHeight值等于元素在不使用的情况下适合视口中所有内容所需的最小高度垂直滚动条。高度的测量方法与 clientHeight:它包括元素的填充，但不包括它的边框，边距或水平滚动条。

2020-01-23 05:41:49

我对这三种类型的描述如下: