一種奇怪的方法是添加

:root {
  --example-var: calc(100px - 5px);
}

#var-calculator {
    // can be fetched through .getBoundingClientRect().width
    width: var(--example-var); 

    // rest of these just to make sure this element
    // does not interfere with your page design.
    opacity: 0;
    position: fixed;
    z-index: -1000;
}

 <custom-element>
  <div id="var-calculator"></div>
</custom-element>

const width = document.getElementById('var-calculator').getBoundingClientRect().width

我不知道這是否適用於您的用例，但我剛剛測試過它並且它有效。

從技術上講，您不能，因為計算值不是靜態的，並且將取決於其他屬性。在這種情況下，這很簡單，因為我們正在處理像素值，但想像一下您將擁有百分比值的情況。百分比是相對於其他屬性而言的，因此在與 var() 一起使用之前我們無法計算它。如果我們使用 em、ch 等單位，則邏輯相同

下面是一個簡單的例子來說明：

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))
console.log(window.getComputedStyle(div).getPropertyValue('font-size'))
console.log(window.getComputedStyle(div).getPropertyValue('width'))
console.log(window.getComputedStyle(div).getPropertyValue('background-size'));

:root {
  --example-var: calc(100% + 5px - 10px);
}
#example {
  font-size:var(--example-var);
  width:var(--example-var);
  background-size:var(--example-var);
}

<div id='example'>some text</div>