为了叙述简单,这里仅拿width示例。
情景一,元素style属性设置了width/height
1 2 3 4 5 | <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将获取不到,如下
1 2 3 4 5 | <div>test<div>
<script>
var div = document.getElementsByTagName( 'div' )[0];
alert(div.style.width);
</script>
|
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
1 2 3 4 5 6 7 8 | <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标签。这里使用第二种方式测试。如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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不可以。如下
1 2 3 4 5 6 7 8 9 10 11 12 | <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属性,也没有引入样式表
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <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。
相关:
http://www.cnblogs.com/snandy/archive/2011/09/05/2167056.html
|