当使用JavaScript访问时，DOM元素的style属性是一个空字符串

Question

我为ID为#foo的元素定义了以下样式。

#foo {
    display: none;
}

我运行以下JavaScript代码：

var foo = document.getElementById('foo')
alert('[' + foo.style.display + ']')

我期待输出为[none]。但是，输出只是[]。这是一个演示：http://jsfiddle.net/bEmUE/

为什么foo.style.display在这里是一个空字符串？

我可以在代码中编写什么来计算这个元素的实际显示属性？

Answer 1

style属性仅为您提供有关内联样式的信息。

  

然而，它对于了解元素的风格没有用   一般来说，因为它只表示在中设置的CSS声明   element的内联样式属性，而不是来自样式规则的属性   其他地方，例如该部分中的样式规则或外部规则   样式表。

     

_{来源：MDN HTMLElement.style}

相反，你应该使用它：

getComputedStyle(foo).display;

demo