`
clrw
  • 浏览: 20802 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

我的理解:为什么obj.style.backgroundColor有时候取不到值?

 
阅读更多

obj.style.backgroundColor有时候能取到值,有时候取不到,这是为什么呢?看了下面的代码你就知道了。

<html>
    <head>
        <style type="text/css">
	    p {background-color: #ccc}
	</style>
	</head>
	<body>
	    <p id="demo" class="p">非内联样式。</p>
		<p id="demo2" style="height:50px; width:250px; margin-top:10px; text-align:center; line-height:50px; background-color:#ccc;">内联样式。</p>
	</body>
</html>

<script type="text/javascript">
    document.getElementById("demo").onclick = function() {
        alert(
            "高度:"+this.style.height+"\n"+
            "宽度:"+this.style.width+"\n"+
            "上边距:"+this.style.marginTop+"\n"+
            "对齐:"+this.style.textAlign+"\n"+
            "行高:"+this.style.lineHeight+"\n"+
            "背景颜色:"+this.style.backgroundColor
        );
        alert(
            "高度:"+getRealStyle(this, "height")+"\n"+
            "宽度:"+getRealStyle(this, "width")+"\n"+
            "上边距:"+getRealStyle(this, "marginTop")+"\n"+
            "对齐:"+getRealStyle(this, "textAlign")+"\n"+
            "行高:"+getRealStyle(this, "lineHeight")+"\n"+
            "背景颜色:"+getRealStyle(this, "backgroundColor")
        );
    };
    document.getElementById("demo2").onclick = function() {
        alert(
            "高度:"+this.style.height+"\n"+
            "宽度:"+this.style.width+"\n"+
            "上边距:"+this.style.marginTop+"\n"+
            "对齐:"+this.style.textAlign+"\n"+
            "行高:"+this.style.lineHeight+"\n"+
            "背景颜色:"+this.style.backgroundColor
        );
    };

    // 一定要取到值怎么办?可以用下面这个方法。
    function getRealStyle(obj, styleName) {
        var realStyle = null;
        if(obj.currentStyle) {
            realStyle = obj.currentStyle[styleName];
        } else if(window.getComputedStyle) {
            realStyle = window.getComputedStyle(obj, null)[styleName];
        }
        return realStyle;
    }
</script>

 我个人的理解和结论就是内联样式是可以取到值的,否则是取不到的,一定要取到值怎么办?可以用代码中的getRealStyle(obj, styleName)获取。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics