如何使用 JS 编辑 CSS 变量？答案

【问题标题】：How do I edit a CSS variable using JS?如何使用 JS 编辑 CSS 变量？
【发布时间】：2017-05-13 05:59:47
【问题描述】：

我有这些 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");
}

【问题讨论】：

不，它是一个 css 变量。我在这篇文章中发现了它们
broken-links.com/2014/08/28/…
是的，这些 CSS 变量使用“本机”预处理器（基本上，它们最终会预先转换为真实的属性/属性）。顺便说一句，所有浏览器都没有广泛支持此功能（仅 FF，来自文章。我不知道其他浏览器） - 无论如何，如果你想在 JS 中操作它们，你的语法是不正确的。您需要操纵属性（似乎不是属性） - 所以试试htmlTag[0].styles.setProperty('--main-text-color', '#FFCF40');
我复制了你的答案，现在的错误是它不能设置未定义的属性。我能麻烦你举个小提琴的例子吗？
查看我的答案以获得广泛支持的类似或更好的方法，查看布雷特关于如何解决您的问题的答案（浏览器支持有限）stackoverflow.com/a/41371037/600486

标签： javascript jquery css

【解决方案1】：

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

【讨论】：

这更像是一个评论而不是一个答案
我没想到。我会试一试，然后回复你

【解决方案2】：

事实证明，使用el.style.cssText 属性或el.style.setProperty 或el.setAttribute 方法可以更改CSS 变量。在您的代码中 sn-ps 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 sn-p 更改它。

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 变量的浏览器。

【讨论】：

这将覆盖现有的内联样式。
是的，你需要像这样修改道具：document.querySelector("html").style.setProperty('width', fixed.width + 'px')但是我无法让它工作
我猜html.style.setProperty("--main-background-color", "green"); 是首选方式。使用setAttribute('style', ..) 将覆盖任何其他内联样式，style.cssText = ... 也是如此

【解决方案3】：

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

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>

【讨论】：

投了反对票，因为它根本没有回答问题。
@Ced 等等！您是说我的回答没有解决 OP 进行主题化的需要吗？ - 我不确定我是否同意你的看法。仅仅因为我以广泛支持的方式回答（而不是使用有限的浏览器支持方法） - 请阅读：如何回答 (stackoverflow.com/help/how-to-answer) -> 答案可以是“不要这样做”但“试试这个而是“.... 耸耸肩

【解决方案4】：

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

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

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

【讨论】：

由于某种原因，当在转换中使用 var 时，我无法让它工作，如下所示：left: calc(10% - (var(--width) / 2) );

【解决方案5】：

如果您使用的是:root：

:root {
    --somevar: black;
}

它将是 documentElement。

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

【讨论】：

【解决方案6】：

原生解决方案

获取/设置 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); }

  &lt;div&gt;Red background set by --myVariable&lt;/div&gt;

为避免这种意外行为，您必须在调用.getPropertyValue() 之前使用getComputedStyle()方法。然后，getter 将如下所示：

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

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

我的个人方法

我已经实现了CSSGlobalVariables 一个很小的 (以便于访问和操作。

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

【讨论】：

【解决方案7】：

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

【讨论】：