如何检查哪些样式应用于元素？

Question

我有一个 HTML 对象元素，它被检索

document.getElementById()

有什么方法可以找出应用于此元素的样式吗？ 不仅仅是在 CSS 属性中设置的类名。 我需要的是类似于 FireBug (FF Addons) 的样式检查功能。 这可能是用 JavaScript 完成的吗？

Answer 1

您应该能够通过getComputedStyle()做到这一点。 然后，您可以使用getPropertyValue()提取您要查找的任何 CSS 规则，或者您只需遍历所有值：

 let element = document.getElementById("test"); let styles = window.getComputedStyle(element); let bg = styles.getPropertyValue("background-color"); let fg = styles.getPropertyValue("color"); console.log(bg); console.log(fg);

 div { color: #333; border-radius: 0.25rem; }

 <div id="test" style="background: #ccc">Hello World</div>

但是，请注意 MDN 中的这两个重要引用：

返回的样式是一个实时的 CSSStyleDeclaration 对象，它会在元素的样式更改时自动更新。

和：

返回的 CSSStyleDeclaration 对象包含 CSS 属性普通名称的活动值。 例如，border-bottom-width 而不是 border-width 和 border 简写属性名称。