如何在 JavaScript 中更改 CSS :root 颜色变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37801882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change CSS :root color variables in JavaScript
提问by Daedalus
Alright, I'm creating a system for my webpage that allows users to change the theme. How I want to accomplish this is by having all the colors as variables, and the colors are set in the :root part of the CSS.
好的，我正在为我的网页创建一个系统，允许用户更改主题。我想通过将所有颜色作为变量来实现这一点，并将颜色设置在 CSS 的 :root 部分。
What I want to do is change those colors via JavaScript. I looked up how to do it, but nothing that I attempted actually worked properly. Here's my current code:
我想要做的是通过 JavaScript 更改这些颜色。我查了查怎么做，但我尝试的任何东西都没有真正正常工作。这是我当前的代码：
CSS:
CSS：
:root {
--main-color: #317EEB;
--hover-color: #2764BA;
--body-color: #E0E0E0;
--box-color: white;
}
JS:
JS：
(Code to set the theme, it's ran on the click of a button) - I didn't bother adding the :root change to the other 2 themes since it doesn't work on the Dark theme
（设置主题的代码，单击按钮即可运行） - 我没有费心将 :root 更改添加到其他 2 个主题，因为它不适用于 Dark 主题
function setTheme(theme) {
if (theme == 'Dark') {
localStorage.setItem('panelTheme', theme);
$('#current-theme').text(theme);
$(':root').css('--main-color', '#000000');
}
if (theme == 'Blue') {
localStorage.setItem('panelTheme', 'Blue');
$('#current-theme').text('Blue');
alert("Blue");
}
if (theme == 'Green') {
localStorage.setItem('panelTheme', 'Green');
$('#current-theme').text('Green');
alert("Green");
}
}
(Code that is ran when the html is loaded)
（加载html时运行的代码）
function loadTheme() {
//Add this to body onload, gets the current theme. If panelTheme is empty, defaults to blue.
if (localStorage.getItem('panelTheme') == '') {
setTheme('Blue');
} else {
setTheme(localStorage.getItem('panelTheme'));
$('#current-theme').text(localStorage.getItem('panelTheme'));
}
}
It shows the alert, but does not actually change anything. Can someone point me in the right direction?
它显示警报，但实际上并没有改变任何东西。有人可以指出我正确的方向吗？
回答by Daedalus
Thank you @pvg for providing the link. I had to stare at it for a little to understand what was going on, but I finally figured it out.
谢谢@pvg 提供链接。我不得不盯着它看了一会儿才明白发生了什么，但我终于想通了。
The magical line I was looking for was this:
我正在寻找的神奇线是这样的：
document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');
That did exactly what I wanted it to do, thank you very much!
这正是我想要它做的，非常感谢！
回答by iProDev
To use the values of custom properties in JavaScript, it is just like standard properties.
在 JavaScript 中使用自定义属性的值，就像标准属性一样。
// get variable from inline style
element.style.getPropertyValue("--my-variable");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-variable");
// set variable on inline style
element.style.setProperty("--my-variable", 4);
回答by v2p
old jquery magic still working too
旧的 jquery 魔术仍然有效
$('#yourStyleTagId').html(':root {' +
'--your-var: #COLOR;' +
'}');
