如何检索 DOM 元素的应用样式值

检索 DOM 元素的 Display 属性

在网页中，display 属性决定元素的可见性和布局。 .style.* 属性提供对 HTML 中定义的样式属性的访问，而 getComputedStyle() 方法则显示应用的样式值。

理解 .style.* 属性

.style.* 属性，例如 .style.display，返回分配给元素的相应样式属性的值。但是，这些属性并不反映浏览器应用的样式。例如，在以下代码片段中：

<code class="html"><style type="text/css">
  a { display: none; }
</style>

<script type="text/javascript">
  var a = (document.getElementById('a')).style;
  alert(a.display); // Displays an empty string
</script></code>

“a”元素的 .style.display 属性返回空字符串，因为 HTML 中没有定义 display 属性。这是具有误导性的，因为该元素在 CSS 样式表中被视觉设置为 display: none。

使用 getCompulatedStyle() 获取应用的样式值

检索应用的样式值，使用 getCompulatedStyle() 方法。例如：

<code class="javascript">var a = document.getElementById('a');
var computedStyle = window.getComputedStyle(a);
alert(computedStyle.display); // Displays "none"</code>

在这种情况下，getCompulatedStyle() 返回应用于“a”元素的实际 CSS 值。

结论

处理样式属性时，请注意样式属性（通过 .style. 访问）和应用的样式值（通过 getComputedStyle() 访问）之间的区别。 .style. 属性仅反映 HTML 中定义的样式属性，这可能无法准确表示元素的视觉外观。为此，请始终使用 getCompulatedStyle() 来获取应用的样式值。

以上是如何检索 DOM 元素的应用样式值的详细内容。更多信息请关注PHP中文网其他相关文章！