javascript - 如何检查元素应用了哪些样式？

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 中的这两个重要引用:

The returned style is a live CSSStyleDeclaration object, which updates automatically when the element's styles are changed.

还有:

The returned CSSStyleDeclaration object contains active values for CSS property longhand names. For example, border-bottom-width instead of the border-width and border shorthand property names.