日期:2014-05-16  浏览次数:20427 次

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  
博主,给你一个建议咯:

 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;
这样就可以了吧!