通过 JS 设置 Style 属性

Question

我正在通过 CSS 设置一些属性，如下所示：

:root {--foo: #4c3552;}

我想知道我是否可以通过 JS 做同样的事情。我努力了：

getComputedStyle(document.body).setProperty("--foo", "#4c3552")

但是当通过样式表应用变量作为背景颜色时，html 不会更新，因为我的 HTML 是 <div id="bar"> 并且链接到 html 的 CSS 文件具有如下设置：#bar {background-color: var(--foo);}

Answer 1

setProperty 继续 Element 的style。
阅读更多：CSSStyleDeclaration setProperty

document.body.style.setProperty("--foo", "red")

:root {
  --foo: blue;
}

#bar {
  background-color: var(--foo);
}

<div id="bar">TEST</div>