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

#DOM 2011-06-08

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

开始之前，先提一些常识性的东西：
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><html>的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><html>的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><html>的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><body>的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>