检索 DOM 元素的显示属性：揭示真实值

提供的 HTML 代码引入了具有不同显示的段落和锚点风格。但是，通过 style 属性检索这些样式似乎会导致意外的空字符串。为什么会出现这种情况，如何准确检索显示属性？

空字符串之谜

最初的困惑是因为 .style.*属性直接映射到样式属性，而不是应用的样式。这意味着您本质上是在检查内联样式声明，这可能并不总是反映计算的样式。

解决方案： getCompulatedStyle

获取实际应用的样式，包括继承的属性，都需要使用getComputedStyle方法。此方法采用 DOM 元素作为参数，并返回包含计算样式值的 CSSStyleDeclaration 对象。

可以修改提供的代码以使用 getCompulatedStyle，如下所示：

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);
var p = (document.getElementById('p'));
alert(getComputedStyle(p).display);
p.style.display = 'none';
alert(getComputedStyle(p).display);

现在，第一个警报将为锚点标记显示“none”，第二个警报将为段落元素显示“block”，第三个警报将显示有意显示设置后的“无”。这准确地反映了元素的计算显示样式。

替代方法：类切换

您可以考虑使用类名来切换，而不是依赖于显示属性元素的可见性。通过将表示与逻辑分离，您可以简化代码并使其不易出现与样式相关的问题。