Question

也许我疯了或累。但我不明白为什么我突然无法从内部样式表中检索我的元素样式。但是如果我将样式设为内联，它就有效。一个简单的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #box_1  {padding:1em;width:25%;background-color:blue;color:red;font-size:2em;font-weight:bolder}
        #test_1 {position:absolute;bottom:1em;right:1em;font-size:2em;}
    </style>
</head>
<body>
<div id="box_1" >
    BOX 1
</div>
<button id="test_1" type="button" onclick="test_1()">Alert font-color<br/> from box 1</button>
</body>
<script>
    function test_1()
    {
        var str=document.querySelector("#box_1").style.color;
        alert(str);
    }
</script>
</html>

Answer 1

如果要访问元素的有效样式（包括全局定义的CSS），请使用getComputedStyle()：

function test_1() {
  var str=window.getComputedStyle( document.querySelector("#box_1") )
                .getPropertyValue ( 'color' );
  alert(str);
}

style属性本身，只是引用元素style属性和您使用JavaScript设置的样式。有关详细信息，请参阅respective MDN documentation。

无法使用document.querySelector ...或document.getElementById从内部样式表中获取属性

1 个答案: