無法從document.querySelector或document.getElementById獲取內部樣式表的屬性

也許我瘋了或累了。但我不明白爲什麼我突然無法從內部樣式表中檢索我的元素樣式。但是，如果我將內聯風格製作出來，它就會有效。一個簡單的代碼，例如：無法從document.querySelector或document.getElementById獲取內部樣式表的屬性

<!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>

來源

2014-02-14 The Witch

如果你想訪問一個元素的有效方式（包括全局定義的CSS），使用getComputedStyle()：

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

的style屬性本身，只是指元素style屬性以及您使用JavaScript設置的樣式。有關詳細信息，請參閱respective MDN documentation。

來源

2014-02-14 13:56:38 Sirko

無法從document.querySelector或document.getElementById獲取內部樣式表的屬性

回答

相關問題