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

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

iteye_3965

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

阅读量86

点赞数

分类专栏： JavaScript 文章标签： IE Opera WordPress Firefox

本文链接：https://blog.csdn.net/iteye_3965/article/details/81766842

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

四種瀏覽器對 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]