0

希望通过 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的键，是返回对象的下一个键。

此外，有没有办法只获取元素的声明样式而不是所有计算的样式？

4

1 回答 1

0

这是您可以迭代它的方法。有关更多详细说明，请查看： 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;
}

于 2020-12-24T08:20:15.767 回答