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

Question

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

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

但是，如果此变量表达式包含类似 calc 的函数，则 getPropertyValue 调用会将表达式作为文本返回而不是对其进行计算，即使在使用 getComputedStyle< 时也是如此.

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

如何获取使用 calc 等 CSS 函数的 CSS 变量的计算值？

请看下面的例子:

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

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

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

Answer 1

从技术上讲，您不能这样做，因为计算值不是静态的，而是取决于其他属性。在这种情况下，这是微不足道的，因为我们正在处理像素值，但想象一下您将拥有百分比值的情况。百分比是相对于其他属性的，因此我们无法计算它，直到它与 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>

注意最后一种情况很重要，其中 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>

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