获取使用像calc这样的表达式的CSS变量的计算值 [英] Get computed value of CSS variable that uses an expression like calc

问题描述

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

In JavaScript, you can get the value of a CSS variable using getPropertyValue(property). This function is useful for retrieving variables declared in the :root block.

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

但是，如果此变量表达式包含类似 calc 的函数，则即使使用 getComputedStyle .

However, if this variable expression contains a function like calc, the getPropertyValue call returns the expression as text rather than computing it, even when using getComputedStyle.

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

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

How can I get the computed value of a CSS variable that uses a CSS function like calc?

请参见以下示例:

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

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

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

推荐答案

从技术上讲，您不能这样做，因为计算出的值不是静态的，并且将取决于其他属性.在这种情况下，这是微不足道的，因为我们正在处理像素值，但请设想一下您将拥有百分比值的情况.百分比是相对于其他属性的，因此，在将其与 var()一起使用之前，我们无法对其进行计算.如果我们使用 em ， ch 等

Technically you cannot because the computed value is not static and will depend on other properties. In this case it's trivial since we are dealing with pixel value but imagine the case where you will have percentage value. Percentage is relative to other properties so we cannot compute it until it's used with var(). Same logic if we use unit like em, ch, etc

这是一个简单的例子来说明:

Here is a simple example to illustrate:

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>

重要的是要注意最后一种情况，即结合百分比和像素值时背景大小具有特殊的行为.在第一种情况下，您还可以清楚地看到浏览器甚至不会计算 5px-10px ，并且仅在使用 var()时才会执行此操作.

It's important to note the last case, where background-size has a special behavior when combining percentage and pixel value. You can also clearly see in the first case that the browser will not even compute the 5px - 10px and will do it only when using var().

如果您知道 calc()仅与像素值一起使用，则可以简单地将其应用于任何属性并读取它.之所以会起作用，是因为该计算值将始终以与该属性相同的方式求值:

In case you know that the calc() will only be used with pixel values, you can simply apply it to any property and read it. It will work since the computed value will always be evaluted the same whataver the property is:

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>

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

Of course you need to make sure to consider a property that expect a pixel value or you will have an invalid value (like with background in the previous example).

这篇关于获取使用像calc这样的表达式的CSS变量的计算值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！