情景一，元素style屬性設置了width/height
復制代碼 代碼如下:
<div style="width:100px;">test<div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.style.width);
</script>
如上，使用el.style.width即可。如果沒有在style屬性中設置width，那麼使用el.style.width將獲取不到，如下
復制代碼 代碼如下:
<div>test<div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.style.width);
</script>
所有浏覽器中彈出的是空字符串。即使將樣式嵌在頁面的css中也仍然獲取不到，如下
復制代碼 代碼如下:
<style>
div {width: 100px}
</style>
<div>test<div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.style.width);
</script>
這時候getComputedStyle或currentStyle將會派上用場。
情景二，元素通過引入樣式表設置width/height
有兩種方式引入樣式表，一是使用link標簽引入單獨的css文件，二是直接在html頁面中使用style標簽。這裡使用第二種方式測試。如下
復制代碼 代碼如下:
<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。說明通過getComputedStyle和currentStyle可以獲取到元素被定義在樣式表中的寬高。
那如果元素即沒有在style屬性中設置寬高，也沒有在樣式表中設置寬高，還能用getComputedStyle或currentStyle獲取嗎？答案是getComputedStyle可以，currentStyle不可以。如下
復制代碼 代碼如下:
<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 既沒有設置style屬性，也沒有引入樣式表。在Firefox/IE9/Safari/Chrome/Opera中可以獲取到寬高（浏覽器默認），但IE6/7/8中卻不行，返回的是auto。
注意，這裡getStyle方法優先使用getComputedStyle，而IE9已經支持該方法。因此IE9中可以獲取到寬高。但IE6/7/8不支持，只能使用currentStyle獲取。
情景三，元素既沒有設置style屬性，也沒有引入樣式表
復制代碼 代碼如下:
<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>
思路很簡單：獲取元素的offsetWidth/offsetHeight，減去元素的padding和border。