如何通过JavaScript设置CSS根变量？当前代码修改后页面未生效

你之前的写法错在两个关键点：

1. getComputedStyle()返回的是只读的计算样式对象，完全没法用来修改样式属性
2. CSS里的:root对应的是<html>元素，不是<body>，你找错了操作对象

直接用下面的代码就能实现需求：

document.documentElement.style.setProperty("--foo", "#4c3552");

原理很清晰：document.documentElement就是:root对应的DOM元素，直接操作它的style属性设置CSS变量后，#bar的background-color会自动读取更新后的--foo值，页面样式会实时更新。

如果之后需要读取这个根变量的当前值，可以用这段代码：

const fooColor = getComputedStyle(document.documentElement).getPropertyValue("--foo");

内容的提问来源于stack exchange，提问作者Jan Šebek