如何在JavaScript中的頁面上獲取所有自定義屬性

本文介紹如何使用JavaScript獲取CSS自定義屬性值，並構建一個自動生成的調色板示例。 我們知道，可以使用getComputedStyle和getPropertyValue來訪問單個自定義屬性，但如果有多個屬性，則需要編寫大量重複代碼。本文將展示如何自動化此過程。

假設我們已在HTML元素上聲明了多個自定義屬性：

 html {
  --color-accent: #00eb9b;
  --color-accent-secondary: #9db4ff;
  --color-accent-tertiary: #f2c0ea;
  --color-text: #292929;
  --color-divider: #d7d7d7;
}

我們可以通過以下步驟自動獲取所有自定義屬性並生成調色板：

1. 獲取所有樣式表:使用document.styleSheets獲取頁面上的所有樣式表（內部和外部）。

2. 過濾第三方樣式表:為了安全起見，只處理當前域上的樣式表。 我們使用isSameDomain函數過濾掉第三方樣式表：

    const isSameDomain = (styleSheet) => {
     if (!styleSheet.href) return 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(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];
         }, [])
     ), []);
   
   const cssCustomPropIndex = getCSSCustomPropIndex();
   document.querySelector(".colors").innerHTML = cssCustomPropIndex.reduce(
     (str, [prop, val]) => `${str}<div class="color__swatch" style="--color: ${val};"></div> `, "");

   這個方法可以自動生成一個顯示所有CSS自定義屬性的調色板，無需手動編寫大量代碼。 未來，可以使用CSS Typed Object Model Level 1 draft中的CSSStyleRule.styleMap屬性簡化代碼。