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 に答える