在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