检索 DOM 元素的 Display 属性
您在检索 HTML 元素的“display”属性时遇到了差异。虽然您最初可能期望获得“无”或“阻止”,但事实并非如此。让我们研究一下根本原因。
在您的示例代码中,您正在访问元素样式的“style”属性。但是,这些属性对应于“style”属性中定义的内联样式,而不是应用于元素的计算样式。要访问实际应用的样式,您应该使用“getCompulatedStyle”方法。
<code class="javascript">var a = document.getElementById('a'); var p = document.getElementById('p'); const aStyle = getComputedStyle(a); const pStyle = getComputedStyle(p); alert(aStyle.display); alert(pStyle.display);</code>
此代码段将准确显示元素的实际计算“显示”属性,对于'a' 元素和 'p' 元素的 'block'。
区分 'style' 属性中定义的样式和浏览器应用的样式非常重要。前者优先于后者,但“getComputedStyle”返回实际应用于 DOM 元素的属性值。
作为替代方案,请考虑使用 CSS 类来管理元素的显示属性。这种方法将表示与逻辑分开,提供了更好的控制和灵活性。
以上是如何准确获取DOM元素的'display”属性?的详细内容。更多信息请关注PHP中文网其他相关文章!