调整字号

使用 JavaScript 获取视口和文档高度

每个 DOM 节点都具有三个属性可以用来获取高度:

clientHeight content area + padding
offsetHeight border + content area + padding
scrollHeight 没有滚动条(内容展开)时的高度

如何使用这三个属性来获取浏览器视口以及文档的高度呢?放上我在各个浏览器中测试的结果。

测试浏览器有 IE6-8、Firefox、Chrome 以及 Opera(Presto)。Chrome,Safari 和新版 Opera 同是 WebKit 引擎,结果可以互相参考。以下 bodyhtml 分别表示 document.bodydocument.documentElement

html.clientHeight

在各浏览器中,均返回视口高度。

html.offsetHeight

返回 <html> 元素的高度,可以理解为文档高度,前提是没有给 <html> 元素设置 heightIE6-8 中还是返回视口高度。

html.scrollHeight

总是返回文档高度。在 Firefox、Opera、IE8 中,返回文档高度和视口高度中较大的那个。

body.clientHeight 和 body.offsetHeight

返回 <body> 元素的高度(近似于文档高度),如果 <body> 设置了 height,则返回设定的值(IE6 仍然返回 <body> 内元素的总高度)。

body.scrollHeight

总是返回文档高度。在 WebKit 中,返回文档高度和视口高度中较大的那个。

总结

获取视口高度用 html.clientHeight,IE6-8 还可以用 html.offsetHeight

获取文档高度可以用 html.scrollHeightbody.scrollHeight,注意有些浏览器需要 fix。fix 主要是指当文档高度小于视口高度时,如果你需要获取确切的文档高度,则要取两个属性中较小的值。

剩下的几个属性可以获取 <body><html> 的高度,之所以不用他们,是因为它们受 height 属性的影响,比如你可以给 <body> 设置一个较小的 height,这时子元素会发生溢出,并不影响浏览,但获取的高度就不是正确的文档高度了。

另外现代浏览器中还有一个属性 window.innerHeight 可以用来获取视口高度,IE9+ 才开始支持。得到的值有时候会多十几个像素,因为 innerHeight 把滚动条的宽度也计算在内。

兼容各个浏览器的写法:

// 获取视口高度
var viewportH = window.innerHeight || document.documentElement.clientHeight;

// 获取文档高度
var docH = document.body.scrollHeight;
// 或者
var docH = document.documentElement.scrollHeight;

可以点击这个 demo 在你的浏览器中测试。

还没有评论,沙发空缺中……
flight