JavaScriptのページですべてのカスタムプロパティを取得する方法

この記事では、JavaScriptを使用してCSSカスタムプロパティ値を取得し、自動的に生成されたパレットの例を作成する方法について説明します。 getComputedStyleとgetPropertyValueを使用して単一のカスタムプロパティにアクセスできることを知っていますが、複数のプロパティがある場合は、多くの重複コードを記述する必要があります。この記事では、このプロセスを自動化する方法を示します。

HTML要素で複数のカスタムプロパティを宣言したとします。

 html {
  -color-accent：＃00eb9b;
   -  color-accent-condary：＃9db4ff;
  -COLOR-ACCENT-TERTIARY：＃F2C0EA;
  -Color-Text：＃292929;
  -Color-Divider：＃D7D7D7;
}

すべてのカスタムプロパティを自動的に取得し、次の手順でパレットを生成できます。

1. すべてのスタイルシートを取得する： document.styleSheetsを使用して、ページ上のすべてのスタイルシート（内側と外側）を取得します。

2. フィルターサードパーティのスタイルシート：セキュリティ上の理由から、現在のドメイン上のスタイルシートのみが処理されます。 isSameDomain関数を使用して、サードパーティのスタイルシートを除外します。

    constisdamedomain =（styleSheet）=> {
     if（！styleSheet.href）trueを返します。
     return styleSheet.href.indexof（window.location.origin）=== 0;
   };

3. すべてのスタイルのルールを取得する：すべてのスタイルルールを配列に融合するために、 reduceとconcat方法を使用します。

4. 非ベーススタイルのルールをフィルター：タイプCSSStyleRuleのルールのみが保持され、他のタイプのルール（ CSSMediaRuleなど）が保持されます。 isStyleRule関数を使用してフィルタリングします。

    const isstylerule =（rule）=> rule.type === 1;

5. すべての属性の名前と値を取得します：各スタイルルールのstyle属性（ CSSStyleDeclarationオブジェクト）を繰り返し、 mapメソッドを使用してすべての属性の名前と値を取得します。

6. フィルター以外の属性： --始まるカスタム属性のみが保存されます。 filterメソッドを使用してフィルタリングします。

7. HTMLを生成する： reduceメソッドを使用して、取得したカスタム属性と値に基づいてHTMLコードを生成し、それを使用してカラーパレットを表示します。使用します<div>要素はカラーサンプルとして使用され、インラインスタイルを使用して色を設定します。外部CSSは<code>var(--color)を使用して背景色を設定します。

   最終コードは、次の構造に似ています（特定の実装の詳細については、元のテキストを参照）：

    const getCSScustomPropIndex =（）=> [... document.stylesheets]
     .Filter（IssadeDomain）
     .reduce（（final、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];
         }、[]）
     ）、[]）;
   
   const csscustompropindex = getcsscustompropindex（）;
   document.queryselector（ "。色"）。innerhtml = csscustompropindex.reduce（
     （str、[prop、val]）=> `$ {str}<div class="color__swatch" style="--color: ${val};"></div> `、" "）;

   このメソッドは、多くのコードを手動で書き込むことなく、すべてのCSSカスタムプロパティを表示するカラーパレットを自動的に生成します。将来的には、CSSSと入力されたオブジェクトモデルレベル1ドラフトのCSSStyleRule.styleMapプロパティを使用して、コードを簡素化できます。