如何使用 JavaScript 创建 CSS 变量？

Question

我正在使用 :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;
}

Answer 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>

How can I create CSS variables with JavaScript?