使用 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 中,返回文档高度和视口高度中较大的那个。
阅读全文 »

flight