在以往我都是對(duì)這些屬性死記硬背，很少真正理解過，忘記了就查手冊?？赐瓯疚奈蚁嘈胚@種情況就不會(huì)再發(fā)生了。

元素占據(jù)的物理空間的尺寸
如果你需要獲得元素占據(jù)的物理空間，那么使用offsetHeight和offsetWidth。
自然而然此物理空間必然包含的有：padding、滾動(dòng)條、border。這兩個(gè)屬性與getBoundingClientRect()的height和width屬性是一致的。
為了幫助理解請(qǐng)看下圖：
 
元素內(nèi)容的可視區(qū)域的尺寸
可視區(qū)域包含padding，但是不包含border、滾動(dòng)條。此時(shí)請(qǐng)使用clientHeight和clientWidth。
為了幫助理解請(qǐng)看下圖：
 
元素全部內(nèi)容的尺寸
如果你要獲取元素內(nèi)容的真正大小，當(dāng)然也包含那些不可見的內(nèi)容，此時(shí)你需要使用scrollHeight/scrollWidth。
例如一張600*400的圖片被包含在一個(gè)300*300的可滾動(dòng)的容器元素內(nèi)，那么scrollWidth將返回600，而scrollHeight將返回400
實(shí)測：
當(dāng)元素存在滾動(dòng)條時(shí)，chrome瀏覽器獲取元素的scrollHeight有時(shí)候不準(zhǔn)確！但是本文的例子是正確的，不知道怎么重現(xiàn)。
獲取元素的真實(shí)尺寸
大部分場景，我們并不關(guān)心元素的全部內(nèi)容的尺寸（window/document/body元素除外），最常用的恐怕還是獲取元素占據(jù)的物理空間(offsetHeight/offsetWidth)。
比如對(duì)某段文字設(shè)置自定義的tooltip，這個(gè)時(shí)候需要獲取目標(biāo)元素的高度然后對(duì)tooltip進(jìn)行定位。
不論是clientHeight還是offsetHeight它們都包含了padding，假設(shè)這段文字包含了100px的padding，這個(gè)tooltip的位置顯然會(huì)極其的不準(zhǔn)確。
因此獲取元素的高度通常是需要去掉padding。
由于元素的style屬性只能獲取到內(nèi)聯(lián)樣式的width/height，所以在IE中需要使用el.currentStyle.height/width，
而標(biāo)準(zhǔn)瀏覽器中使用window.getComputedStyle(el,null).width/height。
下面是我整理的園友Snandy的一個(gè)用戶獲取元素真實(shí)高度和寬度的方法 :

使用腳本庫往往能幫助我們解決一些棘手的問題，下面來看看jQuery的相關(guān)方法
jQuery.height()/jQuery.width()
返回一個(gè)整數(shù)，為匹配的jQuery對(duì)象集合中第一個(gè)元素的高度值。
注意此結(jié)果不關(guān)心盒式模型，不包含元素的padding。此方法等價(jià)于getWH(el,'height/width')
這個(gè)方法同樣能計(jì)算出window和document的高度。
jQuery.innerHeight()/jQuery.innerWidth()
對(duì)比jQuery.height() /jQuery.width() 此結(jié)果包含padding，但是不包含border。
當(dāng)元素el未設(shè)置border時(shí)，此方法等價(jià)于el.offsetHeight/offsetWidth
jQuery.outerHeight()/jQuery.outerWidth()
對(duì)比jQuery.height() /jQuery.width() 此結(jié)果包含padding和border，默認(rèn)不包含margin。
當(dāng)元素未指定margin時(shí)，此方法等價(jià)于el.offsetHeight/offsetWidth
可以傳入一個(gè)bool變量來指定是否包含margin。
注意：
由于獲取普通元素的全部內(nèi)容的尺寸意義不大（某些元素除外如window、document、iframe等），
所以jQuery的這三個(gè)方法都未包含不可見區(qū)域。
小測試
下面是一個(gè)div設(shè)置了高度200px，padding為3px，border為1px，里面的圖片為958*512

上面的值你都猜對(duì)了嗎？

更新
又檢查了下測試代碼，scrollHeight在chrome下不準(zhǔn)確的原因是使用了jQuery.ready()，而剛好測試的元素內(nèi)部包含一張圖片。
用過jQuery.ready()的都知道，此時(shí)DOM樹已經(jīng)加載完成，但是圖片元素還沒有完全加載， 因而chrome的處理方式是對(duì)的。
于是我就上例又測試了一遍：
在IE 6 / 8返回結(jié)果為522/519
chrome返回結(jié)果為189
Firefox有一點(diǎn)特殊，不斷刷新頁面會(huì)有兩種結(jié)果出現(xiàn)：1）522；2）189，但是大部分情況是522
出現(xiàn)這種情況肯定與jQuery 1.6.2的ready函數(shù)的實(shí)現(xiàn)有關(guān)系。
不過就上述結(jié)果來看，是否可以推斷jQuery.ready()在chrome中是最安全最快的。

參考資料

各情景下元素寬高的獲取 by Snandy
Determining the dimensions of elements
Measuring Element Dimension and Location with CSSOM in Internet Explorer 9

最新評(píng)論