如何获取窗口高度、页面高度——解读各浏览器盒模型下的窗口、页面文档尺寸

如何获取窗口高度、页面高度——解读各浏览器盒模型下的窗口、页面文档尺寸
作者：Neoxone 发表时间： 2011年06月8号，星期三阅读：10,223 次

获取页面高度或窗口高度，是使用绝对层定位（弹出菜单定位，遮罩层尺寸设置）所经常用到的。
但是各个浏览器在这方面的效果却有着非常大的差异，本文将做一些总结，找出一些全兼容的方法来获取页面的高度，窗口的高度，页面文档的高度，滚动条滚过的距离，以方便今后使用。

开始之前，先提一些常识性的东西：
documentElement的对象元素就是html节点。
offsetHeight包括了clientHeight和border。
scrollHeight包括了滚动内的高度。
页面文档的高度指的是页面内实际内容的高度。

下面的demo中，我们将页面的内容设置为2000*1000px的尺寸。
此处没有对html,body做过width，height设置，否则将有所不同。

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>各种浏览器盒模型下的窗口尺寸,页面文档尺寸</title>
<meta name="author" content="http://www.cssass.com/blog/index.php/2011/1048.html" />
<style type="text/css">
	*{padding:0;margin:0;}
	body{font-size:14px;line-height:1.8}
	h3{padding-top:15px;}
	b{color:#c00;}
	em{font-style:normal;text-decoration:underline;font-size:16px;}
	strong{font-size:16px;}
</style>
	</head>
	<body >
	<div style='height:1000px;width:2000px;'>
		<h3>取得窗口的宽度：</h3>
		<p>试试body的offsetWidth
		<button onclick="alert(document.body.offsetWidth)">body节点的offsetWidth</button>
		<p>但<b>ie6</b>下body的offsetWidth值并不是窗口宽度，还包括了滚动条，成了整个页面的宽度——ie6的Box模型特殊。
		<p>所以通用的是<em>documentElement的offsetWidth</em>
		<button onclick="alert(document.documentElement.offsetWidth)"><strong>&lt;html&gt;的offsetWidth</strong></button>
		<h3>取得页面文档的宽度：</h3>
		<p>试试body的scrollWidth
		<button onclick="alert(document.body.scrollWidth)">body的scrollWidth</button>
		<p>但在<b>firefox</b>和<b>opera</b>下body的scrollWidth却等于窗口宽度，并不是整个页面的宽度。
		<p>所以通用的是<em>documentElement的scrollWidth</em>
		<button onclick="alert(document.documentElement.scrollWidth)"><strong>&lt;html&gt;的scrollWidth</strong></button>
		<h3>取得窗口的高度：</h3>
		<p>先使用body的offsetHeight
		<button onclick="alert(document.body.offsetHeight)">body的offsetHeight</button>
		<p><b>所有浏览器</b>都表示这是页面文档的高度。
		<p>使用documentElement的offsetHeight
		<button onclick="alert(document.documentElement.offsetHeight)">html的offsetHeight</button>
		<p>除<b>ie之外，所有浏览器</b>仍然表示这是页面文档的高度
		<p>试试documentElement的clientHeight<button onclick="alert(document.documentElement.clientHeight)"><strong>&lt;html&gt;的clientHeight</strong></button>
		没错，窗口高度就得使用<em>documentElement的clientHeight</em>
		<h3>取得页面文档的高度(注意，页面文档高度可以小于窗口高度)：</h3>
		<p><button onclick="alert(document.body.offsetHeight)">body的offsetHeight</button>
		<button onclick="alert(document.body.scrollHeight)">body的scrollHeight</button>
		<button onclick="alert(document.documentElement.scrollHeight)">html的scrollHeight</button>
		<p>似乎三者都等于页面高度,但当页面文档高度小于窗口尺寸时，<b>ie8</b>下html的scrollHeight,<b>webkit</b>下body的scrollHeight的值会等于窗口的高度。（这里的demo就不写了）
		<p>所以需使用<em>body的offsetHeight</em><button onclick="alert(document.body.offsetHeight)"><strong>&lt;body&gt;的offsetHeight</strong></button>
		<p>（假如你想获取的是整个页面的高度，而不是说只是页面文档的高度，那可以在窗口高度<em>documentElement.clientHeight和页面文档高度body.offsetHeight之间取较大值</em>。）
		<h3>取得窗口滚过的高度/宽度</h3>
		<p>先用documentElement的scrollTop
		<button onclick="window.scrollTo(100,200);alert(document.documentElement.scrollTop)">documentElement的scrollTop</button>
		<p>发现webkit内核的浏览器<b>chrome</b>和<b>safari</b>下的值始终为0，其他浏览器如我所愿。
		<p>使用body的scrollTop
		<button onclick="window.scrollTo(100,200);alert(document.body.scrollTop)">body的scrollTop</button>
		<p>浏览器表现则恰恰相反
		<p>所以需要兼容二者<button onclick="window.scrollTo(100,200);alert(document.body.scrollTop || document.documentElement.scrollTop)"><strong>document.body.scrollTop || document.documentElement.scrollTop</strong></button>
	</div>
	</body>
</html>