如何在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属性简化代码。