CSS 中使用 JS 变量

在 CSS 中使用 JS 变量，可以通过 CSS 变量（Custom Properties）实现。定义 CSS 变量时，可以使用 var() 函数来引用 JS 变量。

以下是一个例子：

<style>
  :root {
    --main-color: #ff0000;
  }
  
  .box {
    background-color: var(--main-color);
  }
</style>

<div class="box"></div>

<script>
  // JS 变量
  const mainColor = "#00ff00";
  // 将 JS 变量赋值给 CSS 变量
  document.documentElement.style.setProperty('--main-color', mainColor);
</script>

在上述例子中，定义了一个名为 `--main-color` 的 CSS 变量，并将其赋值为 `#ff0000`。在 `.box` 类的样式中使用 var() 函数引用了该变量，从而将其作为背景颜色。然后，通过 JS 将 `--main-color` 的值修改为 `#00ff00`，从而改变了背景颜色。