如何使用JavaScript获取.class作用域下的CSS自定义属性值

你的实现思路完全合理，这是前端工程中JS与CSS共享样式变量、避免多端维护重复值的常见实现方案。以下提供两种适配不同场景的实现方法：

方案1：临时元素取值法（推荐，极简无额外依赖） #

无需依赖页面现有对应类的元素，也不需要全量枚举样式表，仅通过创建临时隐藏元素即可拿到对应值：

function getClassScopedCssVar(className, cssVarName) {
  const tempElement = document.createElement('div')
  // 挂载目标类
  tempElement.classList.add(className)
  // 隐藏元素避免影响页面布局
  tempElement.style.cssText = 'position: absolute; opacity: 0; visibility: hidden; pointer-events: none;'
  document.body.appendChild(tempElement)
  // 读取计算属性
  const varValue = window.getComputedStyle(tempElement).getPropertyValue(cssVarName).trim()
  // 销毁临时元素
  document.body.removeChild(tempElement)
  return varValue
}

// 调用示例
const sidebarBackground = getClassScopedCssVar('sidebar', '--background')
console.log(sidebarBackground) // 输出 gray

该方法的性能开销极低，适合绝大多数仅需读取个别类下自定义属性的场景。

方案2：样式表枚举法 #

适合需要批量读取多个类下自定义属性、不想创建DOM元素的场景：

function getVarFromCssRule(className, cssVarName) {
  // 遍历页面所有样式表
  for (const stylesheet of document.styleSheets) {
    try {
      // 遍历单样式表内的所有规则
      for (const rule of stylesheet.cssRules) {
        // 匹配目标类的规则
        if (rule.selectorText === `.${className}`) {
          return rule.style.getPropertyValue(cssVarName).trim()
        }
      }
    } catch (err) {
      // 跨域样式表无访问权限时会抛出异常，直接跳过即可
      continue
    }
  }
  return ''
}

使用该方法需要注意：跨域加载的CSS样式表需要配置正确的CORS响应头，否则无法读取规则会被自动跳过。

内容的提问来源于stack exchange，提问作者ahong