获取使用 calc 等表达式的 CSS 变量的计算值

Get computed value of CSS variable that uses an expression like calc

在 JavaScript 中,您可以使用 getPropertyValue(property) 获取 CSS 变量的值。此函数对于检索在 :root 块中声明的变量很有用。

:root {
    --example-var: 50px;
}

但是,如果此变量表达式包含类似 calc 的函数,getPropertyValue 会调用 returns 表达式作为文本而不是计算它,即使在使用 getComputedStyle 时也是如此.

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

如何获取使用 CSS 函数(如 calc)的 CSS 变量的计算值?

参见下面的示例:

let div = document.getElementById('example');
console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))
:root {
  --example-var: calc(100px - 5px);
}
<div id='example'></div>

从技术上讲,您不能这样做,因为计算值不是静态的,而是取决于其他属性。在这种情况下,这是微不足道的,因为我们正在处理像素值,但想象一下您将拥有百分比值的情况。百分比是相对于其他属性的,因此我们无法计算它,直到它与 var() 一起使用。如果我们使用 emch、等

等单位,则逻辑相同

这里举个简单的例子来说明:

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>

请务必注意最后一种情况,其中 background-size 在组合百分比和像素值时具有特殊行为。您还可以在第一种情况下清楚地看到浏览器甚至不会计算 5px - 10px 并且只会在使用 var().

时计算

如果您知道 calc() 将仅用于像素值,您可以简单地将它应用到任何 属性 并读取它。它会起作用,因为计算值将始终被评估为与 属性 相同的值:

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'));
console.log(window.getComputedStyle(div).getPropertyValue('background-color'));
:root {
  --example-var: calc(100px - 10px);
  --test:var(--example-var)
}
#example {
  font-size:var(--example-var);
  width:var(--example-var);
  background-size:var(--example-var);
  background-color:var(--example-var);
}
<div id='example'></div>

当然,您需要确保考虑需要像素值的 属性,否则您将得到无效值(如上例中的背景)。

值将在分配(包括以编程方式)给一些实际值时得到计算 属性:

const div = document.getElementById('example');
div.style.width = 'var(--example-var)';
console.log(window.getComputedStyle(div).getPropertyValue('width'));
:root {
  --example-var: calc(100px - 5px);
}
<div id='example'></div>

一个古怪的方法是添加


: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

我不知道这是否适用于您的用例,但我刚刚测试过它并且有效。