如何准确检索 DOM 元素的 Display 属性以及为什么 .style 属性可能返回空字符串

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

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

空字符串之谜

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

解决方案： getCompulatedStyle

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

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

<code class="javascript">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);</code>

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

替代方法：类切换

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

以上是如何准确检索 DOM 元素的 Display 属性以及为什么 .style 属性可能返回空字符串的详细内容。更多信息请关注PHP中文网其他相关文章！