JS：获取 CSS 自定义属性的"real"值

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"；。有了这样的东西，这很容易：

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

因此，如果我做一个console.log(firstFooColor)，如果第一个元素只是.foo，我会得到rgb(0, 128, 0)，如果第二个元素有类.inverted，颜色会是rgb(250, 128, 114)。

我的问题是：有没有一种方法可以通过选择一个元素来获得var(--color_2, var(--color_1, white))而不是颜色输出

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

提前感谢您的帮助！

Answer 1

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

例如，我注意到，如果你在CSS中为颜色定义十六进制值，那么它就无法识别它们。因此，可以使用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(',');
};