如何使用 javascript 获取 css 变量名（键）答案

【问题标题】：How can I get css variable name(key) with javascript如何使用 javascript 获取 css 变量名（键）
【发布时间】：2020-06-30 10:54:21
【问题描述】：

我正在做一个项目，我设计了一个自定义涟漪，但我需要命名我想要应用涟漪的 css 变量，像这样

function setRipple(){
       // I want my ripple to be like this
          var elementColor = // The button background-color variable name;
          var ripple color = `var(--${elementColor}-tint)`


       // Other things goes here
     }

:root{
  --color-primary: #00cc67;
  --color-primary-shade: #008040;
  --color-primary-tint: #e5fff2;
}


.btn{
      background-color:var(--color-primary)
  }

<html>
<body>
 <button class="btn">Ripple button</button>
</body>
</html>

【问题讨论】：

相关（可能重复）：stackoverflow.com/q/54004635/8620333

标签： javascript html css

【解决方案1】：

这很脆弱，但它通过将-tint 附加到您指定的元素颜色来设置波纹值。

该函数查看文档中的第一个（也是第一个）样式表，找到:root 规则，并检查在那里找到的 CSS“--color-”变量键的列表。当它找到一个值与按钮颜色匹配的值时，它会使用该键生成rippleColor 字符串。

脆弱性主要来自颜色匹配的完成方式（并且必须有更好的方法来做到这一点。）此外，如果出于某种原因，有几个具有相同匹配值的变量键，最后一次匹配将被选中。

感谢您的拼图。样式表操作是一头迷人的野兽。

let rippleColor = setRipple();
console.log(`ripple color will be: ${rippleColor}`)

function setRipple() {

  let elementColorName = "";
  const
    btn = document.querySelector(".btn"),
    btnColorVal = getComputedStyle(btn)
      .getPropertyValue("background-color")
      .toString(),
    firstSheet = document.styleSheets[0],
    rules = Array.from(firstSheet.cssRules);
    
  rules
    .filter(r => r.type === 1 && r.selectorText === ":root")
    .map(rule => {
      Object.entries(rule.style)
        .filter(entry => parseInt(entry[0]) > -1)
        .forEach(entry => {
          const
            varName = entry[1],
            varVal = getComputedStyle(document.documentElement)
              .getPropertyValue(varName).trim(),
            match = hexToRgb(varVal) === btnColorVal;
          if(match){ elementColorName = varName; }
        });
    });
    console.log("the button's color is: " + elementColorName);
    const rippleColor = `var(${elementColorName}-tint)`;
    return rippleColor;
}

function hexToRgb(hex){
  const c = '0x' + hex.slice(1);
  return 'rgb(' + [
    (c >> 16) & 255, (c >> 8) & 255, c & 255
  ].join(', ') + ')';
}

:root {
  --color-primary: #00cc67;
  --color-primary-shade: #008040;
  --color-primary-tint: #e5fff2;
}

.btn {
  background-color: var(--color-primary)
}

<html>
<body>
  <button class="btn">Ripple button</button>
</body>
</html>

【讨论】：