如何使用JS编辑CSS变量？

Question

我有这些CSS变量来控制我的项目的颜色，所以我可以做主题。

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);
}

然而，无论我如何尝试更改属性（两个注释行单独尝试），我得到的最接近的不是有效属性。

function loadTheme() {
    var htmlTag = document.getElementsByTagName("html");
    var yourSelect = document.getElementById( "themeSelect" );
    var selectedTheme = ( yourSelect.options[ yourSelect.selectedIndex ].value );
    // htmlTag[0].setAttribute('--main-text-color', '#FFCF40');
    // $("html").css("--main-text-color","#FFCF40");
}

Answer 1

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

var html = document.getElementsByTagName('html')[0];
html.style.cssText = "--main-background-color: red";

或

var html = document.getElementsByTagName('html')[0];
html.style.setProperty("--main-background-color", "green");

或

var html = document.getElementsByTagName('html')[0];
html.setAttribute("style", "--main-background-color: green");

<强>演示

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

window.onload = function() {
  setTimeout(function() {
    var html = document.getElementsByTagName('html')[0];
    html.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变量的浏览器。

Answer 2

如果您使用:root：

:root {
    --somevar: black;
}

它将是documentElement。

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

Answer 3

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

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

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

Answer 4

原生解决方案

获取/设置CSS3变量的标准方法为Traceback (most recent call last): File "<stdin>", line 1, in <module> ModuleNotFoundError: No module named 'xgboost' 和.setProperty()。

如果您的变量是Globals（在.getPropertyValue()中声明），您可以使用以下内容来获取和设置它们的值。

:root

但是，getter只会使用// setter document.documentElement.style.setProperty('--myVariable', 'blue'); // getter document.documentElement.style.getPropertyValue('--myVariable'); 返回var的值（如果已设置）。 如果已通过CSS声明设置，则返回.setProperty()。在这个例子中检查它：

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()

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

我的个人方法

我已经实现了getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable'); 一个微小的（＆lt; 3kb）javascript帮助器，它自动检测并打包到一个Object中，文档中所有活动的CSS全局变量，以便于访问＆amp;操作

CSSGlobalVariables

应用于Object属性的任何更改都会自动转换为CSS变量。

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

中使用

Answer 5

对于任何在其中挣扎的人，如果您的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 + '"');

Answer 6

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

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