在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里出現該情況了)：

測試一、驗證普通html元素(非body及html根元素)的offsetWidth、clientWidth、scrollWidth及相關height屬性：

html,

body {

margin: 0;

}

body {

padding: 100px;

}

.box {

overflow: scroll;

width: 400px;

height: 300px;

padding: 20px;

border: 10px solid #000;

margin: 0 auto;

box-sizing: content-box;

}

.box-2 {

border: 1px solid #000;

}

...

var boxE = document.querySelectorAll('.box')[0];

console.log('scrollWidth:' + boxE.scrollWidth);

console.log('scrollHeight:' + boxE.scrollHeight);

console.log('clientWidth:' + boxE.clientWidth);

console.log('clientHeight:' + boxE.clientHeight);

console.log('offsetWidth :' + boxE.offsetWidth);

console.log('offsetHeight:' + boxE.offsetHeight);

html,

body{

margin: 0;

}

body{

padding: 100px;

}

.box{

overflow: scroll;

width: 400px;

height: 300px;

padding: 20px;

border: 10px solid #000;

margin: 0 auto;

box-sizing: content-box;

}

.box-2{

border: 1px solid #000;

}

...

總結

以上是生活随笔為你收集整理的html的区域大小,JavaScript位置与大小（1）之正确理解和运用与尺寸大小相关的DOM属性...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。