`getCompulatedStyle` 返回什么以及如何迭代它？

Question

希望通过 JavaScript 获取特定元素的所有样式。

getComputedStyle

工作正常，但是我很困惑它返回什么类型的对象以及如何最好地迭代它。虽然其他一些答案建议使用

forEach

循环对数组进行迭代，因为大多数属性都是基于整数的，但返回对象的其他属性是什么？

例如使用以下方式记录元素的样式：

const styles = getComputedStyle(document.querySelector('.foo'))
for (let property in styles) {
    if (styles.hasOwnProperty(property)) {
      console.log('property:', property, 'value:', styles[property]);
    }
  }

返回（为简洁起见缩写）：

property: 0 value: align-content
property: 1 value: align-items
property: 2 value: align-self
property: 3 value: alignment-baseline
property: 4 value: animation-delay
...
property: alignContent value: normal
property: alignItems value: normal

如果它确实是一个数组，那就有意义了，因为许多属性都是基于索引的，但是在索引 319 之后，它返回到字符串的键，

alignContent

是返回对象的下一个键。

此外，有没有一种方法可以仅获取元素的声明样式，而不是计算的所有？

Answer 1

getComputedStyle

方法返回一个实时的CSSStyleDeclaration对象。

这是迭代其属性的一种方法：

let p = document.querySelector("p");
let comp = getComputedStyle(p);
let out = "";
[...comp].forEach(s => { out += `${s} → ${comp[s]}\n`; });
console.log(out);
console.log(comp.getPropertyValue("font"));

p      { color:gray; font:bold 12pt fantasy; }
#brown { color:brown; }
.green { color:green; }

<p style="color:red" class="green" id="brown">Hello world</p>

在此示例中，我创建了一个

<p>

元素并在四个不同的位置定义了其颜色。我还设置了

font

速记属性，指定诸如

font-size

之类的内容。 CSS 优先考虑

style

属性的红色，您可以在渲染中看到。

JavaScript 代码获取该元素的计算样式，将其转换为适当的数组，然后遍历其每个项目，为每个项目的

out

变量添加一个带有“属性 → 值”的新行。然后将其转储到控制台。

您还可以执行

comp.getPropertyValue(property)

来获取给定属性的值，例如“font-size”（JS 还提供了

comp.fontSize

属性）。示例代码以

comp.getPropertyValue("font")

的输出日志结束。

您会注意到的一件事是，单位在存储中进行了转换：

red

变成了

rgb(255, 0, 0)

，

bold

变成了

700

的数字权重，

12pt

变成了

16px

（至少在我的系统上；这因您的设置而异）。您可能还注意到，作为 速记属性 ，

font

并未在迭代转储中表示，尽管其组件是这样的。

---

您还要求提供仅声明的属性的列表。这非常复杂，因为它们可以来自链接的样式表、

<style>

元素或元素的

style

属性。前两者中，它是可以遗传的。

我想你可以做

base = getComputedStyle(document.createElement("p"))

然后将它与你的

<p>

元素的计算样式进行比较，但这仍然继承了例如

<style>p { color:gray }</style>

（我想你想要）。

如果您真正要寻找的是 HTML 标记的

style

属性中的内联样式，那么就像

p.getAttribute("style")

一样简单，但您必须解析它，否则可能会遇到间距和引号的差异，例如

font:bold 12pt fantasy

与

font: bold 12pt "fantasy"

，而且您仍然存在简写属性的问题。

Answer 2

以下是迭代它的方法。有关更详细的说明，请检查此： https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/

const isSameDomain = (styleSheet) => {
  if (!styleSheet.href) {
    return true;
  }

  return styleSheet.href.indexOf(window.location.origin) === 0;
};

const isStyleRule = (rule) => rule.type === 1;

const getCSSCustomPropIndex = () =>
  [...document.styleSheets]
    .filter(isSameDomain)
    .reduce(
      (finalArr, sheet) =>
        finalArr.concat(
          [...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
            const props = [...rule.style]
              .map((propName) => [
                propName.trim(),
                rule.style.getPropertyValue(propName).trim(),
              ])
              .filter(([propName]) => propName.indexOf("--") === 0);
            return [...propValArr, ...props];
          }, [])
        ),
      []
    )
    
    console.log(getCSSCustomPropIndex());

:root{
  --primary: #112233;
  --secondary: #222222;
}