如何使用纯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.