在web開(kāi)發(fā)中，不可避免遇到要計(jì)算元素大小以及位置的問(wèn)題，解決這類問(wèn)題的方法是利用DOM提供的一些API結(jié)合兼容性處理來(lái)，所有內(nèi)容大概分3篇左右的文章的來(lái)說(shuō)明。本文作為第一篇，介紹DOM提供的與尺寸大小相關(guān)的DOM屬性，提供一些兼容性處理的方法，并結(jié)合常見(jiàn)的場(chǎng)景說(shuō)明如何正確運(yùn)用這些屬性。

1. 正確理解offsetWidth、clientWidth、scrollWidth及相應(yīng)的height屬性

假設(shè)某一個(gè)元素的橫縱向滾動(dòng)條都拖動(dòng)到最末端，則offsetWidth、clientWidth、scrollWidth等屬性相應(yīng)的范圍如下圖所示：

1)offsetWidth ，offsetHeight對(duì)應(yīng)的是盒模型的寬度和高度，這兩個(gè)值跟我們使用chrome審查元素時(shí)看到的尺寸一致：

2)scrollWidth，與scrollHeight對(duì)應(yīng)的是滾動(dòng)區(qū)域的寬度和高度 ， 但是不包含滾動(dòng)條的寬度！滾動(dòng)區(qū)域由padding和content組成。

3)clientWidth，clientHeight對(duì)應(yīng)的是盒模型除去邊框后的那部分區(qū)域的寬度和高度，不包含滾動(dòng)條的寬度。

4)任何一個(gè)DOM元素，都可以通過(guò)以下api快速得到offsetWidth，clientWidth，scrollWidh及相關(guān)的height屬性：

//domE為一個(gè)DOM Html Element對(duì)象

domE.scrollWidth

domE.scrollHeight

domE.clientWidth

domE.clientHeight

domE.offsetWidth

domE.offsetHeight

//domE為一個(gè)DOM Html Element對(duì)象

domE.scrollWidth

domE.scrollHeight

domE.clientWidth

domE.clientHeight

domE.offsetWidth

domE.offsetHeight

5) 這些屬性在現(xiàn)代瀏覽器包括pc和mobile上幾乎沒(méi)有兼容性問(wèn)題，可以放心使用 。如果你想了解詳細(xì)的兼容性規(guī)則，可以參考下面的2篇文章：

W3C DOM Compatibility – CSS Object Model View

cssom視圖模式cssom-view-module相關(guān)整理與介紹

下面針對(duì)普通html元素，html根元素和body元素的以上相關(guān)屬性一一測(cè)試，以便驗(yàn)證前面的結(jié)論，總結(jié)一些可在實(shí)際編碼過(guò)程中直接使用的經(jīng)驗(yàn)技巧。之所以要區(qū)分普通html元素，html根元素和body元素，是因?yàn)榍懊娴睦碚?#xff0c;在html根元素和body元素會(huì)有一些怪異之處，需要小心處理。

注：

1、為了減少篇幅，測(cè)試貼出的代碼不是完整的代碼，但不影響學(xué)習(xí)參考，另外文中給出的測(cè)試結(jié)果都是在chrome(版本：45.0)下運(yùn)行得出的，在測(cè)試結(jié)果有差異的情況下，還會(huì)給出IE9，IE10，IE11，firefox(版本：42.0)，opera(版本：34.0)的測(cè)試結(jié)果，沒(méi)有差異的會(huì)在測(cè)試結(jié)果中說(shuō)明，不考慮IE8及以下。

2、safari因?yàn)樵O(shè)備限制暫不測(cè)試，另外它跟chrome內(nèi)核相同，對(duì)標(biāo)準(zhǔn)支持的可靠性差不到哪去。

3、老版本的chrome,firefox,opera也因?yàn)樵O(shè)備的限制無(wú)法測(cè)試，不過(guò)從瀏覽器對(duì)標(biāo)準(zhǔn)的支持程度考慮，這三個(gè)瀏覽器在很早的版本開(kāi)始對(duì)W3C的標(biāo)準(zhǔn)都是比較規(guī)矩的，加之這些瀏覽器更新?lián)Q代的速度較快，現(xiàn)在市面上這些瀏覽器主流的版本也都是較新的。

4、由于不考慮IE8及以下，同時(shí)html現(xiàn)在都用html5，所以document.compatMode = ‘BackCompat' 的情況不考慮。不過(guò)盡管BackCompat模式是IE6類的瀏覽器引出的，但是對(duì)于chrome，firefox等也存在document.compatMode = ‘BackCompat' 的情況，比如下面的這個(gè)網(wǎng)頁(yè)，你用chrome打開(kāi)，并且在console中打印document.compatMode，你會(huì)發(fā)現(xiàn)它的值也是BackCompat(原因跟該頁(yè)面用的是html4.0的dtd有關(guān)，如果換成html4.01的dtd就不會(huì)在chrome和firefox里出現(xiàn)該情況了)：

測(cè)試一、驗(yàn)證普通html元素(非body及html根元素)的offsetWidth、clientWidth、scrollWidth及相關(guān)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;

}

...

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。