Javascript offsetHeight 和 clientHeight 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4106538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
difference between offsetHeight and clientHeight
提问by steve
In the javascript dom - what is the difference between offsetHeight and clientHeight of an element?
在 javascript dom 中 - 元素的 offsetHeight 和 clientHeight 之间有什么区别？
回答by Oded
客户高度：
Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin.
返回对象可见区域的高度（以像素为单位）。该值包含带内边距的高度，但不包含滚动条、边框和边距。
偏移高度：
Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, scrollBar, and the border, but does not include the margin.
返回对象可见区域的高度（以像素为单位）。该值包含带有内边距、滚动条和边框的高度，但不包含边距。
So, offsetHeightincludes scrollbar and border, clientHeightdoesn't.
所以，offsetHeight包括滚动条和边框，clientHeight没有。
回答by Elmue
The answer from Oded is the theory. But the theory and the reality are not always the same, at least not for the <BODY> or the <HTML> elements which may be important for scrolling operations in javascript.
Oded 的答案是理论。但是理论和现实并不总是相同的，至少对于 <BODY> 或 <HTML> 元素而言，这可能对 javascript 中的滚动操作很重要。
Microsoft has a nice image in the MSDN:
微软在MSDN 中有一个很好的图片：
If you have a HTML page which shows a vertical scrollbar one would expect that either the <BODY> or the <HTML> element has a ScrollHeight geater than OffsetHeight as this image shows. This is true for all older versions of Internet Explorer.
如果您有一个显示垂直滚动条的 HTML 页面，您会期望 <BODY> 或 <HTML> 元素的 ScrollHeight 比 OffsetHeight 高，如图所示。这适用于所有旧版本的 Internet Explorer。
But it is not true for Internet Explorer 11 and not for Firefox 36. At least in these browsers OffsetHeight is nearly the same as ScrollHeight which is wrong.
但它不适用于 Internet Explorer 11 和 Firefox 36。至少在这些浏览器中，OffsetHeight 与 ScrollHeight 几乎相同，这是错误的。
And while OffsetHeight may be wrong, ClientHeight is always correct.
虽然 OffsetHeight 可能是错误的，但 ClientHeight 总是正确的。
Try the following code on different browsers and you will see:
在不同的浏览器上尝试下面的代码，你会看到：
<!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>
While older Internet Explorer shows correctly:
虽然较旧的 Internet Explorer 显示正确：
Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874
The output from Firefox and Internet Explorer 11 is:
Firefox 和 Internet Explorer 11 的输出是：
Body off: 1260
Body cli: 1260
Html off: 1276 // this is completely wrong
Html cli: 889
which shows clearly that offsetHeight is wrong here. OffsetHeight and ClientHeight should differ only a few pixels or be the same.
这清楚地表明 offsetHeight 在这里是错误的。OffsetHeight 和 ClientHeight 应该仅相差几个像素或相同。
Please note that ClientHeight and OffsetHeight may also differ extremely for elements that are not visible like for example a <FORM> where OffsetHeight may be the real size of the FORM while ClientHeight may be zero.
请注意，对于不可见的元素，ClientHeight 和 OffsetHeight 也可能有很大不同，例如 <FORM>，其中 OffsetHeight 可能是 FORM 的实际大小，而 ClientHeight 可能为零。
