JavaScript位置與大小（1）之正確理解和運用與尺寸大小相關的DOM屬性，

JavaScript位置與大小（1）之正確理解和運用與尺寸大小相關的DOM屬性，

在web開發中，不可避免遇到要計算元素大小以及位置的問題，解決這類問題的方法是利用DOM提供的一些API結合相容性處理來，所有內容大概分3篇左右的文章的來說明。本文作為第一篇，介紹DOM提供的與尺寸大小相關的DOM屬性，提供一些相容性處理的方法，並結合常見的情境說明如何正確運用這些屬性。

1. 正確理解offsetWidth、clientWidth、scrollWidth及相應的height屬性

假設某一個元素的橫縱向捲軸都拖動到最末端，則offsetWidth、clientWidth、scrollWidth等屬性相應的範圍如所示：

 

1）offsetWidth ，offsetHeight對應的是盒模型的寬度和高度，這兩個值跟我們使用chrome審查元素時看到的尺寸一致：

 

2）scrollWidth，與scrollHeight對應的是捲動區域的寬度和高度 ， 但是不包含捲軸的寬度！捲動區域由padding和content組成。

3）clientWidth，clientHeight對應的是盒模型除去邊框後的那部分地區的寬度和高度，不包含捲軸的寬度。

4）任何一個DOM元素，都可以通過以下api快速得到offsetWidth，clientWidth，scrollWidh及相關的height屬性：

//domE為一個DOM Html Element對象
domE.scrollWidth
domE.scrollHeight
domE.clientWidth
domE.clientHeight
domE.offsetWidth
domE.offsetHeight
//domE為一個DOM Html Element對象
domE.scrollWidth
domE.scrollHeight
domE.clientWidth
domE.clientHeight
domE.offsetWidth
domE.offsetHeight

5） 這些屬性在現代瀏覽器包括pc和mobile上幾乎沒有相容性問題，可以放心使用 。如果你想瞭解詳細的相容性規則，可以參考下面的2篇文章：

W3C DOM Compatibility – CSS Object Model View

cssom視圖模式cssom-view-module相關整理與介紹

下面針對普通html元素，html根項目和body元素的以上相關屬性一一測試，以便驗證前面的結論，總結一些可在實際編碼過程中直接使用的經驗技巧。之所以要區分普通html元素，html根項目和body元素，是因為前面的理論，在html根項目和body元素會有一些怪異之處，需要小心處理。

註：

1、為了減少篇幅，測試貼出的代碼不是完整的代碼，但不影響學習參考，另外文中給出的測試結果都是在chrome（版本：45.0）下運行得出的，在測試結果有差異的情況下，還會給出IE9，IE10，IE11，firefox（版本：42.0），opera（版本：34.0）的測試結果，沒有差異的會在測試結果中說明，不考慮IE8及以下。

2、safari因為裝置限制暫不測試，另外它跟chrome核心相同，對標準支援的可靠性差不到哪去。

3、老版本的chrome,firefox,opera也因為裝置的限制無法測試，不過從瀏覽器對標準的支援程度考慮，這三個瀏覽器在很早的版本開始對W3C的標準都是比較規矩的，加之這些瀏覽器更新換代的速度較快，現在市面上這些瀏覽器主流的版本也都是較新的。

4、由於不考慮IE8及以下，同時html現在都用html5，所以document.compatMode = ‘BackCompat' 的情況不考慮。不過儘管BackCompat模式是IE6類的瀏覽器引出的，但是對於chrome，firefox等也存在document.compatMode = ‘BackCompat' 的情況，比如下面的這個網頁，你用chrome開啟，並且在console中列印document.compatMode，你會發現它的值也是BackCompat（原因跟該頁面用的是html4.0的dtd有關，如果換成html4.01的dtd就不會在chrome和firefox裡出現該情況了）：

http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/compatModeCompat.htm