当 CSS 中定义样式时，为什么 element.style.display 返回空字符串？

了解 JavaScript 中 element.style 属性的行为

当您在 CSS 中定义样式时，JavaScript 中的 element.style 属性的行为有所不同直接通过元素的 style 属性设置它们。

当您在 CSS 中分配样式时，element.style 对于显示等属性返回一个空字符串。这是因为该元素没有应用任何内联样式，并且 CSS 中的 style 属性会覆盖任何内联样式。

但是，如果直接通过元素设置 style 属性，则 element.style 将返回

显示属性为空的原因

CSS中显示属性为空的原因是元素的显示属性继承自其父元素或默认 CSS 样式规则。在提供的示例中，display 属性在 CSS 中设置为 block，但元素本身没有显式设置 display 属性。

因此，当您访问 element.style.display 属性时，它会返回空字符串，因为元素没有应用内联样式，并且无法通过 element.style 访问从 CSS 继承的样式。

检索 CSS 应用的样式

如果需要检索 CSS 应用的样式，可以使用 window.getCompulatedStyle() 方法。此方法返回一个对象，该对象表示元素的计算样式值，包括从父元素继承并通过级联样式表应用的样式。

例如：

const displayValue = window.getComputedStyle(document.getElementById('test')).display;

在本例中，即使 element.style.display 返回空字符串，displayValue 将包含 CSS 中指定的“块”值。

内联 CSS 与外部 CSS

虽然内联 CSS 不被认为是代码模块化和可维护性的良好实践，但在使用 element.style 属性时，您仍然应该了解内联样式和外部样式的不同行为。

通过理解这种行为，您可以准确检索或修改 JavaScript 应用程序中的样式，并有效分离 HTML、CSS 和 JavaScript 代码的关注点。

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