Question

默认情况下，无样式的 div 元素已经有多个 CSS 声明。例如：

cursor:auto;
display:block;
float:none;
font-size:16px;

（和其他几个语句）

注意下面的例子：

document.querySelector('.div1').style.padding = '20px';

.div1 {
  background-color: skyblue;
}

<div class="div1" style="border-radius: 5px;">word</div>

如何只获取已在样式表和 JavaScript 中定义的样式，而忽略所有其他默认声明？

我想得到以下输出：

background-color: skyblue;
border-radius: 5px;
padding: 20px;

Answer 1

通过查看元素的 style 和 document.styleSheets，我们可以找到所有设置的 CSS 属性的名称。然后，我们可以使用 getComputedStyle 获取这些属性的值。

function getAllDefinedStyles(elem) {
  const props = new Set([...elem.style]);
  for (const {cssRules} of document.styleSheets) {
    for (const rule of cssRules) {
      if (elem.matches(rule.selectorText)) {
        for (const prop of rule.style) {
          props.add(prop);
        }
      }
    }
  }
  const computed = getComputedStyle(elem);
  return Object.fromEntries([...props]
      .map(prop => [prop, computed.getPropertyValue(prop)]));
}
console.log(getAllDefinedStyles(document.querySelector('.div1')));

.div1 {
  background-color: skyblue;
  color: red;
}

<div class="div1" style="border-radius: 5px;">word</div>
<script>
  document.querySelector('.div1').style.padding = '20px';
</script>

如何获取当前设置的 CSS 样式？

1 个答案: