Question

在javascript dom中 - 一个元素的offsetHeight和clientHeight有什么区别？

Answer 1

clientHeight：

返回对象可见区域的高度（以像素为单位）。该值包含填充的高度，但不包括scrollBar，border和margin。

offsetHeight：

返回对象可见区域的高度（以像素为单位）。该值包含padding，scrollBar和边框的高度，但不包括边距。

因此，offsetHeight包含滚动条和边框，clientHeight没有。

Answer 2

Oded的答案就是理论。但理论和现实并不总是相同，至少不是＆lt; BODY＆gt;或者＆lt; HTML＆gt;在javascript中滚动操作可能很重要的元素。

Microsoft在MSDN中有一个很好的图像：

ClientHeight, OffsetHeight, ScrollHeight

如果您有一个显示垂直滚动条的HTML页面，则可以预期＆lt; BODY＆gt;或者＆lt; HTML＆gt;如图所示，element的ScrollHeight geater比OffsetHeight高。对于所有旧版本的Internet Explorer都是如此。

但对于Internet Explorer 11而言并非如此，而对于Firefox 36则不然。至少在这些浏览器中，OffsetHeight几乎与ScrollHeight相同，这是错误的。

虽然OffsetHeight可能有误，但ClientHeight始终是正确的。

在不同的浏览器上尝试以下代码，您会看到：

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

旧的Internet Explorer正确显示：

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

Firefox和Internet Explorer 11的输出是：

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

清楚地表明offsetHeight在这里是错误的。 OffsetHeight和ClientHeight应该只有几个像素或相同。

请注意，ClientHeight和OffsetHeight对于不可见的元素也可能有很大不同，例如＆lt; FORM＆gt;其中OffsetHeight可能是FORM的实际大小，而ClientHeight可能为零。

Answer 3

codepen

从内到外，一个元素布局的顺序是：[(内容→内边距)→滚动条→边框]→外边距。

(..) area 指的是名为 client 的区域，而 [..] area 指的是 offset。

Margin 被认为是在元素之外，永远不会涉及任何 JS 布局 API。

获取元素布局的 JS API 的详尽列表是：

对于 Element 类（包括 HTML 元素和 svg 元素）：
- getClientRects()
- getBoundingClientRect().{left,top,right,bottom,x,y,width,height}
- client{Height,Width,Left,Top}
- scroll{Height,Width,Left,Top,LeftMax,TopMax}
对于 HTMLElement 类（不包括 svg 元素）：offset{Height,Width,Left,Top}。
对于 window 对象：scroll{X,Y}、page{X,Y}Offset、inner{Height,Width}、outer{Height,Width}、screen{Left,X,Top,Y}。
对于 screen 对象：avail{Top,Left,Height,Width}、height、width、left、top。

因为根元素无法获取滚动条（浏览器滚动条停留在根元素边框外）。见codepen。

根据规范，当元素是根元素时，client{Height,Width} 和 scroll{Left,Top} 有特殊定义。

client* 等忽略变换并将值舍入为整数，而 getClientRects()/getClientBoundingRect() 涉及变换并返回浮点值。

还有很多其他方面不适合这个答案，所以我总结并写了一篇博文here。

offsetHeight和clientHeight之间的区别

3 个答案: