使用JS

Question

我在LESS css中创建了一个全局变量并为其赋值。我在CSS中的多个类中使用了该值。我想通过javascript动态覆盖该全局变量。

@color: #f938ab;

body {
  font-family: 'Raleway', sans-serif;
  color: @color;
}

我可以使用JavaScript代码覆盖上面的变量吗？

var color = //color from database;
document.documentElement.style.setProperty('@color', color);

或者CSS中还有其他方法吗？

Answer 1

您需要重新考虑您的方法。

也许您可以将一个类应用于主容器（body？）并根据该类更改您的CSS以应用特定颜色？您可以动态更新此颜色的值。

此外，根据您编译LESS文件的位置，您可能还有更多选项。如果你在每个请求上编译服务器（坏方法）并且你在服务器端读取数据库，那么你可以通过改变文件来改变这个变量的值。

如果你在客户端生成CSS（糟糕的方法），你可能会做类似的事情。

这两种解决方案都非常糟糕而且很糟糕＆＃39;并会严重影响性能

Answer 2

根据documentation：

修改变量

启用Less变量的运行时修改。使用新值调用时，将重新编译Less文件而不重新加载。简单的基本用法：

less.modifyVars({
  '@buttonFace': '#5B83AD',
  '@buttonText': '#D9EEF2'
});

这假设您在客户端使用less，否则您将需要为每种颜色创建一个css类并使用javascript进行切换。 但是，只有当你有一个特定的可能颜色列表时才能使用最后一个解决方案，因为十六进制句柄不同。

Answer 3

执行此操作的最佳方法是在正文上添加动态类，并根据正文中添加的类更改@color的值，然后将LESS编译为css。

@color: #f938ab;

body.class1{
@color: color1;
}

body {
  font-family: 'Raleway', sans-serif;
  color: @color;
}

使用javascript在body上添加类。