offsetHeight和clientHeight之间的区别
ste*_*eve 143 javascript
在javascript dom中 - 一个元素的offsetHeight和clientHeight有什么区别？
Ode*_*ded 191
返回对象的可见区域的高度(以像素为单位).该值包含填充的高度,但不包括scrollBar,边框和边距.
返回对象的可见区域的高度(以像素为单位).该值包含padding,scrollBar和边框的高度,但不包括边距.
所以,offsetHeight包括滚动条和边框,clientHeight没有.
- 我注意到的另一件事是clientHeight比offsetHeight快得多.你知道为什么吗？ (3认同)
- @ disc0dancer - 可能是因为浏览器已经提供了`clientSize`(毕竟它是视口),但需要在回流整个文档后计算`offsetHeight`？ (2认同)
- @ disc0dancer - 我的猜测太多了.但这是一个实现的东西 - 不确定所有浏览器都是这样的. (2认同)
Elm*_*mue 76
Oded的答案就是理论.但理论和现实并不总是相同,至少不是<BODY>或<HTML>元素,这对于javascript中的滚动操作可能很重要.
Microsoft在MSDN中有一个很好的图像:
如果您有一个显示垂直滚动条的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
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对于不可见的元素也可能有很大差异,例如<FORM>,其中OffsetHeight可能是FORM的实际大小,而ClientHeight可能为零.
clientHeight = 元素的高度 + 垂直内边距。
\noffsetHeight = 元素的高度 + 垂直内边距 + 顶部和底部边框 + 水平滚动条（如果可用）。
\n添加另一个\xef\xbc\x9a
\n滚动高度= 元素内容的高度（包括屏幕上不可见的内容）+ 垂直内边距。
\n| 归档时间： |
|
| 查看次数： |
76443 次 |
| 最近记录： |