如何从DOM元素获取其CSS属性所用的变量名

如果getComputedStyle只能拿到计算后的最终值（比如#000），且存在多个变量对应同个值无法反向匹配，你可以通过以下两种方式直接获取属性中使用的变量名：

1. 读取内联样式中的变量引用 #

如果目标元素是通过内联样式直接使用变量（比如<div id="my_div" style="background: var(--my-background);"></div>），可以直接解析内联样式字符串提取变量：

const elem = document.getElementById("my_div");
const inlineStyle = elem.getAttribute('style');
const varMatch = inlineStyle.match(/var\((--[a-z0-9-]+)\)/i);
if (varMatch) {
  console.log(varMatch[1]); // 输出 --my-background
}

2. 遍历样式表匹配元素规则 #

如果变量定义在外部样式表或<style>标签中，需要遍历页面所有样式规则，找到匹配目标元素的规则后提取变量：

const elem = document.getElementById("my_div");
const styleSheets = Array.from(document.styleSheets);

styleSheets.forEach(sheet => {
  try {
    const rules = Array.from(sheet.cssRules || sheet.rules);
    rules.forEach(rule => {
      if (elem.matches(rule.selectorText)) {
        Array.from(rule.style).forEach(prop => {
          const value = rule.style.getPropertyValue(prop);
          const varMatch = value.match(/var\((--[a-z0-9-]+)\)/i);
          if (varMatch) {
            console.log(varMatch[1]); // 输出对应的变量名
          }
        });
      }
    });
  } catch (e) {
    // 跳过跨域样式表，避免权限报错
  }
});

额外说明 #

• 若同一属性有多个规则匹配元素，要注意CSS优先级，优先级高的规则会覆盖低优先级的，需优先处理高优先级规则
• 跨域的外部样式表无法读取其规则，这种场景下该方法失效
• 如果变量是通过父元素继承得到的，需要向上遍历父元素重复上述匹配过程

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