clientHeight,scrollHeight和offsetHeight到底有什么区别
PrivateStringName
2015-10-21 16:42
clientHeight,scrollHeight和offsetHeight到底有什么区别
2回答
-
- nideyida
- 2015-10-28 19:13:35
clientHeight
大部分浏览器对 clientHeight 都没有什么异议，认为是元素可视区域的高度，也就是说元素或窗口中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - 水平滚动条高度。
offsetHeight
在IE6，IE7，IE8， IE9以及最新的的FF, Chrome中，对于一般元素，都是offsetHeight = padding + height + border = clientHeight + 滚动条 + 边框。
scrollHeight
scrollHeight的争议比较大，有些浏览器认为scrollHeight可以小于clientHeight，有些认为scrollHeight至少应该等于clientHeight。但有一点是一样的，就是scrollHeight >= topPadding + bottomPadding + 内容margin box的高度。
在浏览器中的区别在于：
IE6、IE7 认为scrollHeight 是内容高度，可以小于clientHeight。
FF 认为scrollHeight 是内容高度，不过最小值是clientHeight。
注： 以上都是对于一般元素而方言的，body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。
在所有的浏览器中，如果你想获取视窗可见部分的高度，应该使用documentElement.clientHeight，因为body.clientHeight是由它的内容决定的。
-
- pardon110
- 2015-10-21 17:17:17
我直接上图了
JavaScript进阶篇
468193 学习 · 21891 问题
相似问题