JS：获取 CSS 自定义属性的“真实”值

Question

我知道这个问题似乎被问了 100 万次，但这里有一点微妙之处。

想象一下，我有一些 CSS 自定义属性，如下所示：

/* Yes the colors are terrible in this exemple, I know */
:root {
    --color_1: salmon;
    --color_2: green;
}
.foo {
    background-color: var(--color_1, var(--color_2, black));
    color: var(--color_2, var(--color_1, white));
}
.foo.inverted {
    background-color: var(--color_2, var(--color_1, white));
    color: var(--color_1, var(--color_2, black));
}

现在在 JS 中，我想获取“.foo”的属性“color”的值。 有了这样的东西，这很容易：

const firstFoo = document.querySelector('.foo');
const gs = getComputedStyle(firstFoo);
const firstFooColor = gs.getPropertyValue('color');

因此，如果我执行console.log(firstFooColor) ，如果第一个元素只是 a.foo 我将得到rgb(0, 128, 0) ，如果第二个元素有 class .inverted颜色将为rgb(250, 128, 114) 。

我的问题是：有没有办法通过选择一个元素来获得var(--color_2, var(--color_1, white))而不是颜色 output ？

我尝试过的一切都失败了。 而且我不想使用document.styleSheets之类的东西，解析所有内容，找到 class 并与元素的类进行比较，然后返回值。 如果选择器更复杂，那将是可怕的，如果有一些@media 或其他，这几乎是不可能的......

在此先感谢您的帮助！

Answer 1

这是实现这一目标的尝试，它似乎有效（在某些条件下）： https://codepen.io/zvona/pen/yLjyEbX?editors=0111

例如，我注意到如果您在 CSS 中为 colors 定义十六进制值，那么它就无法识别它们。 因此，请随意使用hexToRbg类型的函数扩展此解决方案。

此外，这也可能不是最高效的解决方案。 另外，我后来注意到您还要求包括辅助变量。

但到底是什么，我将把最初的解决方案留在这里，供您在需要时开始使用和改进它。

这是实际的代码：

const getUncomputedValue = (elem, target) => {
  const element = document.querySelector(elem);

  if (!element) {
    return;
  }

  const styleValue = getComputedStyle(element).getPropertyValue(target);
  
  if (!styleValue) {
    return;
  }
  
  const allStyling = Array.from(element.computedStyleMap()).filter(([prop, val]) => prop.includes('--') && val[0].toString().includes(styleValue));
  
  return allStyling.map((style) => `var(${style[0]})`).join(',');
};