为什么 JavaScript 的 `this.style[property]` 返回空字符串？

JavaScript 的 this.style[property] 返回空字符串：揭秘原因及解决方案

访问 this.style[property] 时在 JavaScript 中，您可能会遇到它检索空字符串而不是预期值的情况。这可能会令人困惑，特别是当您尝试检索已设置的样式属性时。

理解问题

this.style[property] 旨在访问已在 HTML 中或通过内联样式直接分配给元素的样式。如果尚未为元素显式设置请求的属性，则 this.style[property] 将返回空字符串。

层叠样式的情况

通常，元素的样式在 CSS 样式表中定义。这些样式是级联的，这意味着它们是根据特定规则继承和覆盖的。当一个元素匹配多个样式表规则时，最具体的规则优先。

在提供的示例中，#test 元素在样式表中定义了两种样式： height: 100px;和宽度：100px；。然而，该元素还具有背景的内联样式：#CCC;，它会覆盖背景的#test样式表规则。

由于CSS的级联性质，this.style[width]和this.style [height] 将检索空字符串，因为这些属性已在样式表中设置，但被内联样式覆盖。

解决方案： getCompatedStyle()

要检索有效的样式属性值（包括级联样式），您可以使用 getCompulatedStyle() 方法：

const myElement = document.getElementById('myId');
const style = getComputedStyle(myElement);
console.log(style.height); // "100px"

getComputedStyle() 返回一个对象表示指定元素的计算样式，考虑所有应用的样式，包括继承和覆盖的属性。

以上是为什么 JavaScript 的 `this.style[property]` 返回空字符串？的详细内容。更多信息请关注PHP中文网其他相关文章！