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(',');
};