Question

要使用JSDOM从元素获取样式属性，请使用以下内容：

window.getComputedStyle(element)

这是我找到的唯一示例。使用element.style.someAttribute似乎没有返回任何内容。

使用getComputedStyle是查找属性值的最佳方法吗？

ty！

Answer 1

element.style仅反映HTML元素的style属性的内容。它没有考虑可以使用类样式，id样式等设置的真实样式。

请参见此处：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style （强调我的）

HTMLElement.style属性用于获取和设置元素的内联样式。获取时，它将返回一个CSSStyleDeclaration对象，该对象包含该元素的所有样式属性的列表，并为该元素的 inline 样式属性中定义的属性分配了值。

这意味着：

mySpan = document.getElementById('my-span')
console.info('element.style')
console.info('color', mySpan.style.color)
console.info('font-weight', mySpan.style.fontWeight)
console.info('getComputedStyle')
console.info('color', window.getComputedStyle(mySpan).color)
console.info('font-weight', window.getComputedStyle(mySpan).fontWeight)

#my-span {
  font-weight: bold;
}

<span id="my-span" style="color: red;">This is red and bold</span>

阅读元素JSDOM样式的最佳实践

1 个答案: