在JS文件中访问css变量

Question

我有一个CSS文件，其中有一些变量定义

 @red: red-color
 @yello: yellow-color
 ....

我可以在CSS文件中使用此变量，但我想知道如何在JS文件中访问它们。

Answer 1

假设您使用的是原生CSS变量而不是某些预处理器，请查看this page。在底部有一个名为 JavaScript中的值的部分，它描述了如何在JS代码中访问本机CSS变量。

getComputedStyle(element).getPropertyValue("--my-var");

但是，如果您使用的是CSS预处理器，则无法通过JS检索变量，因为它们已在构建过程中处理过。

Answer 2

那些不是CSS变量，而是LESS变量（因为它们以＆＃34开头; @＆＃34;）

那些被编译成简单的静态属性声明，因此无法在运行时更改它们（除了寻址每个属性）。

如果使用正确的CSS变量（也就是CSS自定义属性），您可以在运行时使用javascript轻松访问它们，并使用style.setProperty方法对其进行更改。

但它们并没有被广泛（足够）支持，所以一定要包括一个fallabck。