为什么 CSS 中定义的样式的“element.style”返回空值？

JavaScript 样式属性差异

Q: 为什么定义 display 时，element.style 始终返回空值在 CSS 中，即使元素继承了样式？

A: element.style 属性检索直接应用于 HTML 文档中元素的内联样式。 CSS 中定义的样式不被视为内联，因此 element.style 不会反映它们。

计算样式：

JavaScript 提供了 window.getCompulatedStyle()函数获取应用于元素的实际有效样式。此函数接受一个元素作为输入，并返回一个 ComputedStyle 对象，其中包含所有 CSS 属性的计算值。

示例：

考虑以下代码：

<div>

#test {
  display: block;
}

访问 document.getElementById('test').style.display 将返回空字符串，而 window.getCompulatedStyle(document.getElementById('test')).display 将正确返回“block”。

结论：

要获取元素应用的 CSS 样式，需要使用 window.getCompulatedStyle()。使用 element.style 仅检索内联样式，通常不会为具有外部 CSS 的元素设置内联样式。

以上是为什么 CSS 中定义的样式的“element.style”返回空值？的详细内容。更多信息请关注PHP中文网其他相关文章！