scrollHeight、clientHeight ,offsetHeight 差別

我認為我們想要兩個東西：

• 一是 scrollWidth（scrollHeight），雖然它用處不大，但應該比 offsetWidth（offsetHeight）有用得多。它表示的是文檔區的寬度（高度），比如一個網頁，特别是門戶網站，拖很長，就要把沒有顯示出來的内容都計算進去。
• 二是視口 viewport，就是 clientWidth，就是視窗中可顯示内容的那塊區域，就是我們常常看到頁面上飛行廣告，飛來飛去，碰到邊邊要反彈的那一塊。

測試結果

結果很複雜，就不說了，這裡隻說實際中怎麼使用：

• 要使用 scrollWidth，取 document.documentElement.scrollWidth 與 document.body.scrollWidth 的最大值；
• 要使用 clientWidth，如果 document.documentElement.clientWidth > 0，則使用 document.documentElement.clientWidth，否則使用 document.body.clientWidth。

表達式為：

• var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
• var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

clientHeight

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

内容可視區域是指浏覽器最後一個工具條以下到狀态欄以上的區域，與頁面内容無關，如有滾動條的話則排除滾動條所占的區域

offsetHeight

IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。

NS、FF 認為 offsetHeight 是網頁内容實際高度，可以小于 clientHeight。

IE和Opera下該值一直等于document.body.clientHeight+滾動條高度+視窗邊框（IE為4，Opera為0）

scrollHeight

IE、Opera 認為 scrollHeight 是網頁内容實際高度，可以小于 clientHeight。

NS、FF 認為 scrollHeight 是網頁内容高度，不過最小值是 clientHeight。

//-----------------------------以上是摘自網友部落格----------------------------------------

//原文部落格位址：http://www.cnblogs.com/wang726zq/archive/2012/05/10/2494256.html

//終極自測方法：需要JSLogger元件，請到日志首頁自行下載下傳。

window.onload = function(){

JSLogger.log("documentElement 的屬性 ");

JSLogger.log(document.documentElement,"height");

JSLogger.log("body 的屬性 ");

JSLogger.log(document.body,"height");

}