如何使用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变量的标准方法是.setProperty()和.getPropertyValue().

如果您的变量是Globals(声明为: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助手,它自动检测并打包到一个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

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