偏移量高度和客户端高度之间的差异

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

98363 次浏览
小开

客户端高度 :

返回对象可见区域的高度(以像素为单位)。该值包含带填充的高度，但不包括 scrollBar、 orders 和页边距。

偏移高度 :

返回对象可见区域的高度(以像素为单位)。该值包含带填充、 scrollBar 和边框的高度，但不包括边距。

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

小开

Oded 给出的答案是理论。但是理论和实际情况并不总是相同的，至少对于 < BODY > 或 < HTML > 元素来说不是这样，这些元素对于 javascript 中的滚动操作可能很重要。

微软在 MSDN中的形象不错:

ClientHeight, OffsetHeight, ScrollHeight

如果您有一个显示垂直滚动条的 HTML 页面，那么您可能希望 < BODY > 或 < HTML > 元素具有一个 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

火狐和 Internet Explorer 11的输出如下:

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

这清楚地表明偏移高度在这里是错误的。OffsetHeight 和 ClientHeight 应该只有几个像素不同，或者是相同的。

请注意，对于不可见的元素，ClientHeight 和 OffsetHeight 也可能有很大的不同，例如 < FORM > ，OffsetHeight 可能是 FORM 的实际大小，而 ClientHeight 可能是零。

小开

enter image description here

Codepen

从内到外，元素布局的顺序是: [(content → padding)→滚动条→边框]→边距。

面积指的是 client，而[ . . ]面积指的是 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。

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

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

还有许多其他方面不适合这个答案，所以我总结并做了一个博客文章 给你。

小开

ClientHeight = 元素的高度 + 垂直填充。

OffsetHeight = 元素的高度 + 垂直填充 + 顶部和底部边框 + 水平滚动条(如果可用的话)。

再加一条:

ScrollHeight = 元素内容的高度(包括屏幕上不可见的内容) + 垂直填充。


提交答案