当在外部 CSS 文件中定义样式时，为什么 `element.style` 返回空？

理解为什么 element.style 返回空

在 JavaScript 中，element.style 属性通常返回直接应用于元素的内联样式属性在 HTML 文档中。然而，内联样式并不是样式元素的首选方法，因为它可能会导致代码不一致和可维护性问题。

但是，当您在外部 CSS 文件中显式定义样式，然后尝试访问这些样式时，就会出现问题使用 element.style 的样式。在这种情况下，element.style 将始终返回一个空对象，让您感到困惑。

内联样式与计算样式

要理解这种行为，掌握这一点至关重要内联样式和计算样式之间的区别。内联样式是指直接应用于 HTML 文档中元素的样式属性，而计算样式表示来自每个适用源的所有适用样式的组合，包括内联样式、CSS 样式表和用户代理样式。

JavaScript 无法直接读取 CSS 样式

JavaScript 本身不具备直接读取 CSS 样式的能力。相反，它依赖于浏览器的渲染引擎，该引擎根据 CSS 的级联规则计算计算样式。

因此，当您访问 element.style 时，您只是访问了内联样式，而内联样式在您的情况就像您在外部 CSS 文件中提供的样式一样。要获取计算样式（包括内联和外部 CSS 样式），您需要使用 window.getCompulatedStyle(element) 函数。

解决方案：使用 getCompulatedStyle

在您的场景中， getCompulatedStyle 函数将提供所需的结果：

这行代码将记录CSS 文件中定义的 display 属性的值，即使 element.style.display 返回一个空字符串。

因此，关键要点是 element.style 特定于内联样式，而 window.getComputedStyle提供对内联和外部 CSS 样式的访问，这是您准确检索样式信息所需的。

以上是当在外部 CSS 文件中定义样式时，为什么 `element.style` 返回空？的详细内容。更多信息请关注PHP中文网其他相关文章！