为了叙述简单,这里仅拿width示例。
情景一,元素style属性设置了width/height
<div id="DivTest" style="width:100px">test</div>
<script language="javascript" type="text/javascript">
var eleDiv = document.getElementById("DivTest");
alert(eleDiv.style.width);
</script>
如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
<div id="DivTest">test</div>
<script language="javascript" type="text/javascript">
var eleDiv = document.getElementById("DivTest");
alert(eleDiv.style.width);
</script>
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
<style type="text/css">
div{ width:100px; }
</style>
<div id="DivTest">test</div>
<script language="javascript" type="text/javascript">
var eleDiv = document.getElementById("DivTest");
alert(eleDiv.style.width);
</script>
这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
<style type="text/css">
div{ width:100px; }
</style>
<div id="DivTest">test</div>
<script language="javascript" type="text/javascript">
function getStyle(el, name) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null)[name];
}else{
return el.currentStyle[name];
}
}
var eleDiv = document.getElementById("DivTest");
alert(getStyle(eleDiv , "width"));
</script>
所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以。
div 既没有设置style属性,也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高(元素宽度的默认值),但IE6/7/8中却不行,返回的是auto。
情景三,元素既没有设置style属性,也没有引入样式表
<style type="text/css">
div{ padding:0 100px; }
</style>
<div id="DivTest">test</div>
<script language="javascript" type="text/javascript">
function getStyle(el, name) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null)[name.toLowerCase()];//Format: 'border-left-width' 'paddingleft'
}else{
return el.currentStyle[name.replace(/-/g,"")];//Formart: 'borderLeftWidth' 'paddingLeft'
}
}
function getWH(el, name) {
var val = name === "Width" ? el.offsetWidth : el.offsetHeight,
which = name === "Width" ? ['Left', 'Right'] : ['Top', 'Bottom'];
if(val === 0)
return 0;
for(var i = 0, a; a = which[i++];) {
val -= parseFloat( getStyle(el, "border-" + a + "-" + name) ) || 0;
val -= parseFloat( getStyle(el, "padding-" + a) ) || 0;
}
return val + 'px';
}
var eleDiv = document.getElementById("DivTest");
alert(getWH(eleDiv , "Width"));
</script>
思路很简单:获取元素的offsetWidth/offsetHeight,减去元素的padding和border。