如何使用純DOM功能（無jQuery）訪問DOM元素的CSS樣式？

Question

由於某些原因，我無法訪問HTML元素的display樣式的值。

這裏是我的JavaScript代碼：

var el = document.querySelector('#warning'); 
console.log(el.style.display) 

我的代碼返回#warning的display風格""空字符串，但實際上它是"none"。

我下面的HTML：

<div id="warning"> 
warning warning warning. 
</div> 

我有下面的CSS：

#warning { 
    display: none; 
} 

任何想法？

Answer 1

你在大部分時間都在做一切正確的事情，但是當你第一次嘗試這些時，你遇到的是對大多數人來說是一個掛斷。

在javascript中的樣式對象正在尋找這個值是在實際元素（內聯），並不直接在CSS代碼中查找它。

要訪問樣式，樣式必須存在於DOM中。你可以看看Window.getComputedStyle()

我希望這可以解釋你爲什麼要到達這個障礙。

Answer 2

如果你知道這個元素是一個ID，我建議你使用getElementById();函數。另外AFAIK樣式方法只獲取內聯樣式。我建議使用getComputedStyle();。

代碼

var myDiv = document.getElementById("myDiv"); 

alert(getComputedStyle(myDiv).display); 

輸出將是 「無」。

例

http://jsfiddle.net/43jLLd5L/

閱讀材料

Not directly related to your question but the answer has some good points.