css中怎么使用js变量

CSS 是网页中最常用的样式语言之一，而 JavaScript 则是网页开发中最常用的脚本语言之一。这两种语言各自在网页开发中起着非常重要的作用。但是，随着 Web 技术的不断发展，两者之间的界限越来越模糊。现在有一种新的技术可以使得 CSS 和 JavaScript 之间的互动更加密切，那就是使用 JavaScript 变量的 CSS 。

所谓“使用 JavaScript 变量的 CSS ”，简单来说就是在 CSS 中使用 JavaScript 变量。这样，我们就可以通过 JavaScript 来控制 CSS 的样式。如果我们修改了 JavaScript 变量的值，那么页面中相应的 CSS 样式也会随之变化。

使用 JavaScript 变量的 CSS 主要有两种方法。第一种方法是使用 CSS 变量，第二种方法是使用 LESS 或 SASS 等预处理器。

第一种方法中，我们可以通过定义 CSS 变量，并在 JavaScript 中修改这些变量的值来实现控制，例如：

:root {
  --main-color: red;
}

.my-div {
  background-color: var(--main-color);
} 

这里我们定义了一个名为 --main-color 的 CSS 变量，它的默认值为红色。然后在 .my-div 元素中使用了这个变量来设置背景色。这样，我们就可以在 JavaScript 中直接修改这个变量的值，从而控制 .my-div 元素的背景色：

document.querySelector(':root').style.setProperty('--main-color', 'blue'); 

第二种方法是使用 LESS 或 SASS 等预处理器。这些预处理器可以让我们定义变量，并在 CSS 中使用这些变量来设定样式。例如：

$main-color: red;

.my-div {
  background-color: $main-color;
} 

在这个例子中，我们使用了 LESS 中的变量 $main-color 来指定 .my-div 元素的背景色。然后，我们可以使用 JavaScript 来修改该变量的值，进而改变元素的背景色：

less.modifyVars({
  'main-color': 'blue'
}); 

这里我们使用 LESS 的 modifyVars() 方法来修改变量 $main-color 的值。

总的来说，使用 JavaScript 变量的 CSS 可以让我们更加灵活地控制网页的样式，同时也增加了开发与设计的协作的可能性。