如何在 JavaScript 中在运行时获取所有应用到 Web 元素的 CSS 值？

Question

我的目标是获取在运行时应用于给定 Web 元素的所有 CSS 属性（及其相应的值）。具体来说，我使用 Java 进行编码，并使用 Selenium 运行 JavaScript 脚本来访问 Web 元素的 CSS 属性。然而，我在尝试查找运行时元素实际应用的 CSS 时遇到了问题。请注意，（1）获取元素的内联样式不是我想要的，（2）大多数现代浏览器已经解决了这个问题：

在上面突出显示的图像中，浏览器已正确识别在运行时应用于元素的所有 CSS 属性。我的目标是获取上面提供的图像中的所有未标记的 CSS 属性及其相应的值。我意识到浏览器可能会在编译网页时积累这些信息，但是在渲染网页/实时网页后是否有办法获取相同的信息？

关于这个主题也提出了类似的问题（最值得注意的是这里）。然而，似乎没有人能够给出正确的答案。最常见的答案是以某种方式使用

getComputedStyle

。然而，虽然这样做确实找到了应用于元素的所有 CSS 属性，但它返回了很多很多不必要的属性（即无用的信息）。为了说明我的观点，使用

getComputedStyle

在与我提供的屏幕截图中的元素相同的元素上返回超过 300 个属性，而我的解决方案（理想情况下）应该只有 6 个属性（屏幕截图中蓝色的属性）。有人对这个问题有任何见解吗？

Answer 1

如果您要求的是删除所有“默认”样式，唯一的方法是将其与相同类型的另一个元素进行比较。这两个元素都需要渲染，因为渲染组件将在作者定义样式之前继承浏览器/用户代理的样式。

const myDiv = document.getElementById('myDiv')
const baseDiv = document.getElementById('base')

const myDivStyles = window.getComputedStyle(myDiv)
const baseDivStyles = window.getComputedStyle(baseDiv)


for (cssProp in baseDivStyles) {
  if (baseDivStyles[cssProp] !== myDivStyles[cssProp]) {
  console.log(cssProp, "base", baseDivStyles[cssProp], "my:", myDivStyles[cssProp])
  }
}

#myDiv {
 background-color: red;
 }

<div id='base'> Base Div </div>
<div id='myDiv'> Red Background </div>