各情景下元素寬高的獲取實(shí)現(xiàn)代碼

更新時(shí)間：2011年09月13日 22:36:23 作者：

為了敘述簡(jiǎn)單，這里僅拿width示例。獲取元素的offsetWidth/offsetHeight，減去元素的padding和border。

情景一，元素style屬性設(shè)置了width/height

 
<div style="width:100px;">test<div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.style.width); 
</script> 

如上，使用el.style.width即可。如果沒(méi)有在style屬性中設(shè)置width，那么使用el.style.width將獲取不到，如下

復(fù)制代碼代碼如下:

 
<div>test<div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.style.width); 
</script> 

所有瀏覽器中彈出的是空字符串。即使將樣式嵌在頁(yè)面的css中也仍然獲取不到，如下

復(fù)制代碼代碼如下:

 
<style> 
div {width: 100px} 
</style> 
<div>test<div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.style.width); 
</script> 

這時(shí)候getComputedStyle或currentStyle將會(huì)派上用場(chǎng)。
情景二，元素通過(guò)引入樣式表設(shè)置width/height
有兩種方式引入樣式表，一是使用link標(biāo)簽引入單獨(dú)的css文件，二是直接在html頁(yè)面中使用style標(biāo)簽。這里使用第二種方式測(cè)試。如下

復(fù)制代碼代碼如下:

 
<style> 
div {width: 100px} 
</style> 
<div>test<div> 
<script> 
function getStyle(el, name) { 
if(window.getComputedStyle) { 
return window.getComputedStyle(el, null); 
}else{ 
return el.currentStyle; 
} 
} 
var div = document.getElementsByTagName('div')[0]; 
alert(getStyle(div, 'width')); 
</script> 

所有瀏覽器中均彈出了100px。說(shuō)明通過(guò)getComputedStyle和currentStyle可以獲取到元素被定義在樣式表中的寬高。
那如果元素即沒(méi)有在style屬性中設(shè)置寬高，也沒(méi)有在樣式表中設(shè)置寬高，還能用getComputedStyle或currentStyle獲取嗎？答案是getComputedStyle可以，currentStyle不可以。如下

復(fù)制代碼代碼如下:

 
<div>test<div> 
<script> 
function getStyle(el, name) { 
if(window.getComputedStyle) { 
return window.getComputedStyle(el, null); 
}else{ 
return el.currentStyle; 
} 
} 
var div = document.getElementsByTagName('div')[0]; 
alert(getStyle(div, 'width')); 
</script> 

div 既沒(méi)有設(shè)置style屬性，也沒(méi)有引入樣式表。在Firefox/IE9/Safari/Chrome/Opera中可以獲取到寬高（瀏覽器默認(rèn)），但I(xiàn)E6/7/8中卻不行，返回的是auto。
注意，這里getStyle方法優(yōu)先使用getComputedStyle，而IE9已經(jīng)支持該方法。因此IE9中可以獲取到寬高。但I(xiàn)E6/7/8不支持，只能使用currentStyle獲取。
情景三，元素既沒(méi)有設(shè)置style屬性，也沒(méi)有引入樣式表

復(fù)制代碼代碼如下:

 
<div>test<div> 
<script> 
function getStyle(el,name) { 
if(window.getComputedStyle) { 
return window.getComputedStyle(el, null)[name]; 
}else{ 
return el.currentStyle[name]; 
} 
} 
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; 
} 
for(var i = 0, a; a = which[i++];) { 
val -= parseFloat( getStyle(el, "border" + a + "Width") ) || 0; 
val -= parseFloat( getStyle(el, "padding" + a) ) || 0; 
} 
return val + 'px'; 
} 
var div = document.getElementsByTagName('div')[0]; 
alert(getWH(div, 'width')); 
</script> 