使用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声明,而不是来自其他地方样式规则的CSS声明,例如节中的样式规则或外部样式床单.

_{资料来源:MDN HTMLElement.style}

相反,你应该使用这个:

getComputedStyle(foo).display;

演示