關于元素的尺寸(dimensions) 說明

更新時間：2011年09月13日 22:42:53 作者：

在使用JavaScript腳本獲取元素的尺寸時，有幾個屬性你需要弄清楚，不然會很棘手。

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

元素占據的物理空間的尺寸
如果你需要獲得元素占據的物理空間，那么使用offsetHeight和offsetWidth。
自然而然此物理空間必然包含的有：padding、滾動條、border。這兩個屬性與getBoundingClientRect()的height和width屬性是一致的。
為了幫助理解請看下圖：
offsetHeight/offsetWidth

元素內容的可視區(qū)域的尺寸
可視區(qū)域包含padding，但是不包含border、滾動條。此時請使用clientHeight和clientWidth。
為了幫助理解請看下圖：
offsetHeight/offsetWidth

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

復制代碼代碼如下:

 
function getStyle(el) { 
if(window.getComputedStyle) { 
return window.getComputedStyle(el, null); 
}else{ 
return el.currentStyle; 
} 
} 
function getWH(el, name) { 
var val = name === "width" ? el.offsetWidth : el.offsetHeight, 
which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom']; 
// display is none 
if(val === 0) { 
return 0; 
} 
var style = getStyle(el); 
for(var i = 0, a; a = which[i++];) { 
val -= parseFloat( style["border" + a + "Width"]) || 0; 
val -= parseFloat( style["padding" + a ] ) || 0; 
} 
return val; 

} 

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

上面的值你都猜對了嗎？

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

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

參考資料

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