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>
Une façon étrange est d'ajouter
Je ne sais pas si cela fonctionnera pour votre cas d'utilisation, mais je viens de le tester et cela fonctionne.
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êmeVoici un exemple simple pour illustrer :