当在单独的文件中定义 CSS 样式时，为什么'element.style”返回空值？

理解 JavaScript 中的 CSS 样式属性

在 JavaScript 中引用 CSS 样式属性时，开发者经常会遇到一个意想不到的问题：element.style 返回空尽管在 CSS 文件中定义了样式，但这些值仍然存在。本文旨在阐明这种行为并解释其发生的原因。

内联样式和计算样式之间的区别

JavaScript 的 element.style 属性提供对内联样式的访问直接在 HTML 元素中定义。但是，当 CSS 样式在 CSS 文件中单独定义时，它们不被视为内联样式。相反，它们成为计算样式。

计算样式：应用值

计算样式表示在考虑所有继承样式、CSS 规则后应用于元素的实际样式属性和浏览器默认值。要在 JavaScript 中访问计算样式，请使用 getCompulatedStyle() 函数。

空 element.style 值的说明

element.style 仅包含内联样式。由于 CSS 样式不是内联定义的，因此无法通过 element.style 访问它们，因此返回空值。

示例：

<div>

#test {
  display: block;
}

console.log(document.getElementById('test').style.display); // Returns ""

使用 getCompulatedStyle 检索计算值样式

要获取应用的样式属性，包括 CSS 中定义的样式属性，请使用 getCompulatedStyle():

console.log(window.getComputedStyle(document.getElementById('test')).display); // Returns "block"

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