DOM元素'；使用JavaScript访问时，s style属性为空字符串

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

我运行以下JavaScript代码：

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

我希望输出是

[none]

。但是，输出只是

[]

。下面是一个演示：

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

---

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

style属性只提供有关内联样式的信息

但是，它对于学习中元素的样式并没有用处 常规，因为它只表示 元素的内联样式属性，而不是来自样式规则的属性 其他位置，例如节中的样式规则，或外部 样式表

资料来源：

相反，您应该使用以下选项：

getComputedStyle(foo).display;

---

似乎“innerText”（在您的示例中使用）不兼容跨浏览器：谢谢，我更新了fiddle以使用jQuery（与问题无关，只是为了演示目的）。@Whiststoe-他的演示使用innerText仅演示OP所问问题的解决方案，而不是解决方案的一部分！谢谢你的提醒，但这无关紧要！是的，我只是对小提琴为什么不适合我感到困惑。

getComputedStyle(foo).display;