再談 document.documentElement 與 document.body 的 scrollWidth、offsetWidth、clientWidth

（scrollHeight、offsetHeight、clientHeight 同樣可按本文去理解。）

這是一個很復雜的問題，讓我們想像一下：

• document.documentElement.scrollWidth
• document.documentElement.offsetWidth
• document.documentElement.clientWidth
• document.body.scrollWidth
• document.body.offsetWidth
• document.body.clientWidth

有 6 個屬性要測，這 6 個屬性要放在 4 種情況中：

• 沒有指定 DOCTYPE，網頁內容沒有超過窗口寬度；
• 沒有指定 DOCTYPE，網頁內容超過窗口寬度；
• 指定 DOCTYPE，網頁內容沒有超過窗口寬度；
• 指定 DOCTYPE，網頁內容超過窗口寬度；

然后這 4 種情況要放到幾個主流瀏覽器中，假設只有 3 種瀏覽器：

• IE
• Firefox
• Chrome

算一下，6 * 4 * 3，有 72 種情況要測試，天啊。並且不要指望 Firefox 和 Chrome 結果是一樣的，不要指望 Firefox 不會出現讓您費解的結果，所以這真是一件惱火的事。

從應用入手簡化分析

72 種測試情況確實很惱火，但我們回過頭來一想，我們到底想要什么？

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

• 一是 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;

動手

scrollWidth、offsetWidth、clientWidth 兼容性測試文件