四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋

最新推荐文章于 2024-03-22 14:25:18 发布

原创最新推荐文章于 2024-03-22 14:25:18 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #Opera #WordPress #Firefox

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文解析了四种浏览器（IE、NS、Opera、FF）对于document.body的clientHeight、offsetHeight及scrollHeight的不同解释。这些属性用于定义网页内容在浏览器窗口内的可见区域大小、实际内容高度及其与滚动条的关系。

四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

[b]clientHeight[/b] 大家對 clientHeight 都沒有什麼異議，都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後一個工具條以下到狀態欄以上的這個區域，與頁面內容無關。

[b]offsetHeight[/b] IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。 NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。

[b]scrollHeight[/b] 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 的解釋與上面相同，只是把高度換成寬度即可。

from [url]http://sziyu.wordpress.com/2008/05/15/%E5%9B%9B%E7%A8%AE%E7%80%8F%E8%A6%BD%E5%99%A8%E5%B0%8D-documentbody-%E7%9A%84-clientheight%E3%80%81offsetheight-%E5%92%8C-scrollheight-%E7%9A%84%E8%A7%A3%E9%87%8B/[/url]