javascript获取style里设置样式的有关问题
日期：2014-05-16 浏览次数：20387 次
javascript获取style里设置样式的问题！
原来代码如下：
CSS Code:
<style type="text/css">
#dd{width:100px; height:100px; background:green; padding:10px; border:10px solid red; }
</style>
Xhtml Code:
<div id="dd" >dd</div>
Javascript Code:
<script>
window.onload=function(){
alert(document.getElementById("dd").style.height);
??? }
</script>
弹出框结果为空！Why?
现在，还是原来的javascript代码，我将CSS和XHMTL代码稍微一下：
CSS Code:
<style type="text/css">
#dd{ background:green; padding:10px; border:10px solid red; }
</style>
Xhtml Code :(将宽和高的样式写在这里)
<div id="dd" style="width:100px; height:100px;" >dd</div>
弹出框结果为100px！，Why ??
难道与CSS权重有关？百思不得其解！先记录下来，以后找答案！
1 楼
mercyblitz
2010-07-16
博主，给你一个建议咯：
上面的代码是为了挂浏览器，解释一下：window.getComputedStyle IE不支持，因此用currentStyle代替。不过里面有写property name不同，因此用了正则处理。
然后执行：
var dd = document.getElementById('dd');
var h=window.getComputedStyle(dd,'height').height;
alert(h);
就OK啦。
if (!window.getComputedStyle) {
window.getComputedStyle = function(el, pseudo){
this.el = el;
this.getPropertyValue = function(prop){
var re = /(\-([a-z]){1})/g;
if (prop == 'float')
prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function(){
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
}
return this;
}
}
上面的代码是为了挂浏览器，解释一下：window.getComputedStyle IE不支持，因此用currentStyle代替。不过里面有写property name不同，因此用了正则处理。
然后执行：
var dd = document.getElementById('dd');
var h=window.getComputedStyle(dd,'height').height;
alert(h);
就OK啦。
2 楼
hao3721
2010-07-19
谢谢楼上兄弟，我在网上找了资料，还是IE和FF各自为战的问题，还有其他七七八八的问题吧。我认为
var dd=document.getElementById('dd');
window.getComputedStyle?window.getComputedStyle(dd,null).width:dd.currentStyle.width;
这样就可以了吧！
var dd=document.getElementById('dd');
window.getComputedStyle?window.getComputedStyle(dd,null).width:dd.currentStyle.width;
这样就可以了吧！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
