Question

我有一个由

检索的html对象元素

document.getElementById()

有没有办法找出应用于此元素的样式？不仅仅是CSS属性中设置的类名。我需要的是类似于FireBug（FF插件）的样式检查功能。这可能是用JavaScript完成的吗？

Answer 1

你可以看看at this article。

Answer 2

您应该可以通过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速记属性名称。

我找到了css探测器的解决方案

2 个答案: