通過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：

<div id="myDiv"></div>

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

為什么是這樣？

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替代方案）。

這應該適用於所有瀏覽器（基於上面QuirksMode鏈接的功能）：

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);