Obtenez la valeur calculée d'une variable CSS à l'aide d'une expression de type calcul

Question

En JavaScript, vous pouvez utiliser getPropertyValue(property) 获取 CSS 变量的值。此函数对于检索 :root variables déclarées en blocs pour être utiles.

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

Mais cela est également vrai si cette expression variable contient quelque chose comme calc 的函数，则 getPropertyValue 调用将以文本形式返回表达式而不是计算它，即使使用 getCompulatedStyle.

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

Comment obtenir la valeur calculée d'une variable CSS à l'aide de fonctions CSS telles que calc ?

Voir exemple ci-dessous :

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

Une façon étrange est d'ajouter

: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

Je ne sais pas si cela fonctionnera pour votre cas d'utilisation, mais je viens de le tester et cela fonctionne.

Answer 2

Techniquement, vous ne pouvez pas, car la valeur calculée n'est pas statique et dépendra d'autres propriétés. Dans ce cas, c'est simple puisque nous avons affaire à des valeurs de pixels, mais imaginez une situation où vous auriez des valeurs en pourcentage. Le pourcentage est relatif aux autres attributs, donc dans des unités comme var() 一起使用之前我们无法计算它。如果我们使用 em、ch, la logique est la même

Voici un exemple simple pour illustrer :

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>