如何使用 JavaScript 创建 CSS 变量？ [复制]

【问题标题】：How can I create CSS variables with JavaScript? [duplicate]如何使用 JavaScript 创建 CSS 变量？ [复制]
【发布时间】：2021-12-24 03:57:00
【问题描述】：

我正在使用:root 创建一些 CSS 变量。是否可以使用 JavaScript 而不是 CSS 创建它们？下面是一个简单的例子：

<div id="container"></div>

:root {
  --first-color: #000;
  --second-color: #666666;
}

#container {
  background-color: var(--second-color);
  width: 90px;
  height: 90px;
}

【问题讨论】：

【解决方案1】：

是的，您可以通过.setProperty() 方法做到这一点：

const root = document.documentElement;
root.style.setProperty('--first-color', 'red');
root.style.setProperty('--second-color', 'blue');

p {
  color: var(--first-color);
}

div {
  color: var(--second-color);
}

<p>First color</p>
<div>Second color</div>

【讨论】：