通過JS抓取style.display屬性只有在設置了內聯纔有效？

Question

我想抓住頁面上的div的DISPLAY屬性。如果它是通過內聯樣式屬性設置的，我似乎只能抓住它。

如果我的JS是這樣的：

alert(document.getElementById('myDiv').style.display); 

它會提醒 '塊' 與此HTML：

<div id="myDiv" style="display: block;"></div> 

然而，如果我通過外部樣式表進行設置：

#myID {display: block} 

我的HTML： 和我的HTML：

然後我的警報是一個空字符串。

這是爲什麼？

Answer 1

這是CSS的「特徵」。要實際獲取樣式，您需要使用window.getComputedStyle（大多數瀏覽器）或element.currentStyle（Internet Explorer）。

修復程序window.getComputedStyle可在以下位置找到IE：http://snipplr.com/view/13523/getcomputedstyle-for-ie/。此外，請參閱此頁以獲取更多信息：http://www.quirksmode.org/dom/getstyles.html#link7（對於跨瀏覽器getComputedStyle備選項，底部附近有一個腳本）。

這應該在所有的瀏覽器（基於上面怪異模式鏈接功能）：

var elem = document.getElementById("myDiv"); 
if (elem.currentStyle) { 
    var displayStyle = elem.currentStyle.display; 
} else if (window.getComputedStyle) { 
    var displayStyle = window.getComputedStyle(elem, null).getPropertyValue("display"); 
} 
alert(displayStyle);