CSS使用JS变量

在CSS中直接使用JavaScript变量不是原生支持的特性，因为CSS和JavaScript是两种不同的语言，它们在浏览器中的执行环境和执行时间都有所不同。不过，你可以通过以下几种方法在CSS中使用JavaScript变量：

1. 内联样式：你可以使用JavaScript动态地为元素的style属性赋值。
2. CSS自定义属性：也称为CSS变量，可以在JavaScript中修改并利用这些变量。

下面是使用这两种方法的示例代码：

内联样式

// JavaScript
const element = document.getElementById('myElement');
const varValue = '200px'; // 假设这是你的JavaScript变量
element.style.width = varValue; // 将变量值应用到元素的内联样式

CSS自定义属性

/* CSS */
:root {
  --my-var: 10px;
}
 
.my-element {
  padding: var(--my-var); /* 使用CSS变量 */
}

// JavaScript
document.documentElement.style.setProperty('--my-var', '20px'); // 更新CSS变量的值

在这个例子中，我们首先在CSS中定义了一个自定义属性--my-var，然后在JavaScript中通过setProperty方法更新了这个属性的值。这样一来，所有使用这个变量的CSS规则都会相应地更新。