原来可以使用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");

Demo

下面的演示使用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>

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

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

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

我个人的做法

我已经实现了CSSGlobalVariables一个很小的（<3 kb）javascript模块，它可以自动检测并打包成一个Object，文档中所有活跃的CSS全局变量，为了更容易访问和操作。

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

应用于Object属性的任何更改都会自动转换为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 Package 它。

: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 + '"');

您可以添加如下内容（不使用类变量）

function loadTheme() {
  var htmlTag = document.getElementById("myDiv");
  var yourSelect = document.getElementById("themeSelect");
  var selectedTheme = (yourSelect.options[yourSelect.selectedIndex].value);
  console.log("selected theme: " + selectedTheme);

  // reset class names
  htmlTag.className = '';
  // add selected theme
  htmlTag.className = 'theme' + selectedTheme;
}

.theme1 {
  color: blue;
}
.theme2 {
  color: red;
}

<div id="myDiv">
  test
</div>
<select id="themeSelect" onChange="loadTheme()">
  <option value="1">Theme 1</option>
  <option value="2">Theme 2</option>
</select>

在CSS中定义包含各种主题样式（.theme1 {...}，.theme2 {...}等）的类，然后根据所选的值使用JS更改类可能会更容易。

javascript中没有：：占位符选择器，但是绕过这个方法，可以在样式表中声明一个css变量，这个变量可以用于DOM，并且可以使用javascript操作。
举个例子。

let root = document.querySelector(':root');
function setPlaceholderColor(){
root.style.setProperty('--placeholder', yellow);
}

:root{
  --placeholder: red;
}

input::placeholder{
  color: var(--placeholder)
}

<input type="text" placeholder ="Enter Name" onchange="setPlaceholderColor()" />