ClientHeight

window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight 滚动条边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

	d
d
		d

ClientHeight相关推荐

clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
javascript 之clientHeight、scrollHeight、offsetHeight
三者均用于获取一个Dom节点的高度,不过他们的含义并不相同. clientHeight : MDN对该属性的描述如下: The Element.clientHeight read-only prope ...
获取可视区域高度赋值给div（解决document.body.clientHeight的返回值为0的问题）
获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题) 参考文章: (1)获取可视区域高度赋值给div(解决document.body.client ...
[转载]offsetHeight , clientHeight, scrollHeight 区别
我们这里说说四种浏览器对 document.body 的 clientHeight.offsetHeight 和scrollHeight的解释,这里说的是 document.body,如果是 HTML ...
关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...
document.body.clientHeight与document.documentElement.clientHeight
当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
关于clientWidth、offsetWidth、clientHeight、offsetHeigh
对clientWidth.offsetWidth.clientHeight.offsetHeigh有时候就是搞不清楚,在网络上找到的别人的总结: 引用内容 IE6.0.FF1.06+: clientW ...
看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight
每次用JS获取页面的高宽时总都是相当的揪心,同一个属性在不同的浏览器或不同的W3C标准下所表示的意思都不尽相同.以下就针对页面的实际高宽和可见区域做个总结,以便大家查阅! 1. 在W3C标准的情况下 ...
clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括元素的滚动条,不包括边框 clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeight o ...
clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较
clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border ...

ClientHeight

ClientHeight相关推荐

最新文章

热门文章