事实证明，可以使用el.style.cssText属性el.style.setProperty或el.setAttribute方法来更改 CSS 变量。在您的代码片段el.setAttribute中使用不正确，这导致了您遇到的错误。这是正确的方法：

document.documentElement.style.cssText = "--main-background-color: red";

或者

document.documentElement.style.setProperty("--main-background-color", "green");

或者

document.documentElement.setAttribute("style", "--main-background-color: green");

演示

以下演示使用 CSS 变量定义背景颜色，然后在加载 2 秒后使用 JS 代码段更改它。

window.onload = function() {
  setTimeout(function() {
    document.documentElement.style.cssText = "--main-background-color: red";
  }, 2000);
};

html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}

body {
  background-color: var(--main-background-color);
}

这显然只适用于支持 CSS 变量的浏览器。

如果您正在使用:root：

:root {
    --somevar: black;
}

它将是 documentElement。

document.documentElement.style.setProperty('--somevar', 'green');

原生解决方案

获取/设置 CSS3 变量的标准方法是.setProperty()和.getPropertyValue()。

如果您的变量是全局变量（在 中声明:root），您可以使用以下内容来获取和设置它们的值。

// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');

但是，如果已设置，getter 将仅返回 var 的值，使用.setProperty(). 如果已通过 CSS 声明设置，则返回undefined. 在这个例子中检查它：

let c = document.documentElement.style.getPropertyValue('--myVariable');
alert('The value of --myVariable is : ' + (c?c:'undefined'));

:root{ --myVariable : red; }
div{ background-color: var(--myVariable); }

  <div>Red background set by --myVariable</div>

为了避免这种意外行为，您必须getComputedStyle()在调用之前使用该方法.getPropertyValue()。然后吸气剂看起来像这样：

getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');

在我看来，访问 CSS 变量应该更简单、快速、直观和自然……

我的个人方法

我已经实现CSSGlobalVariables了一个很小的 ​​(<3kb) javascript module，它自动检测并打包到一个对象中，文档中的所有活动 CSS 全局变量，以便于访问和操作。

import {CSSGlobalVariables} from './css-global-variables.js';
let cssVar = new CSSGlobalVariables();
// set the CSS global --myColor value to "green"
cssVar.myColor = "green";

应用于对象属性的任何更改都会自动转换为 CSS 变量，反之亦然。

可在：https : //github.com/colxi/css-global-variables

您可以简单地使用设置任意 CSS 属性的标准方式： setProperty

document.body.style.setProperty('--background-color', 'blue');

body {
  --background-color: red;
  background-color: var(--background-color);
}

对于任何为此苦苦挣扎的人，如果您的 CSS 变量是一个句子，您需要将它包装在 qoutes 中。

:root {
  --my-css-var: 'Hello Person!';
}

.selector:after {
    content: var(--my-css-var);
}    

这不起作用：

let myVar = 'Hi Person! (doesnt work)';
document.getElementsByTagName('html')[0].style.setProperty('--my-css-var', myVar);

但这确实：

let myVar = 'Hi Person! (works)';
document.getElementsByTagName('html')[0].style.setProperty('--my-css-var', '"' + myVar + '"');