javascript - 使用 JavaScript 访问 DOM 元素的样式属性是一个空字符串

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 声明，而不是来自其他地方的样式规则的那些声明，例如部分中的样式规则或外部样式床单。

_{来源：MDN HTMLElement.style}

相反，你应该使用这个：

getComputedStyle(foo).display;

演示