Javascript 如何使用JS编辑CSS变量？

我有这些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中定义包含各种主题样式的类（

.theme1{…}

，

.theme2{…}

等），然后根据所选值使用JS更改类可能会更容易。

结果表明，使用

el.style.cssText

属性可以更改CSS变量，或

el.style.setProperty

或

el.setAttribute

方法。在您的代码段中，

el.setAttribute

使用不正确，这导致了您遇到的错误。以下是正确的方法：

document.documentElement.style.cssText = "--main-background-color: red";

或

或

演示

下面的演示使用CSS变量定义背景色，然后在加载2秒后使用JS代码段更改背景色

window.onload=function（）{
setTimeout（函数（）{
document.documentElement.style.cssText=“--主背景色：红色”；
}, 2000);
};
html{
--主背景图像：url（../images/starsBackground.jpg）；
--主文本颜色：#4CAF50；
--主背景色：rgba（0,0,0,25）；
--贝塔背景色：rgba（0,0,0,85）；
}
身体{
背景色：var（--主背景色）；
}
您可以添加如下内容（无需使用类变量）


函数loadTheme（）{
var htmlTag=document.getElementById（“myDiv”）；
var yourSelect=document.getElementById（“themeSelect”）；
var selectedTheme=（yourSelect.options[yourSelect.selectedIndex].value）；
log（“选定主题：+selectedTheme”）；
//重置类名
htmlTag.className=''；
//添加选定主题
htmlTag.className='theme'+所选主题；
}
.theme1{
颜色：蓝色；
}
.主题2{
颜色：红色；
}

测试
主题1
主题2
您只需使用设置任意CSS属性的标准方法即可：


document.body.style.setProperty（'--background color'，blue'）
正文{
--背景色：红色；
背景色：var（--背景色）；
}
如果您使用的是
：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');

但是，如果使用
.setProperty（）设置了变量，getter将只返回变量的值。
如果已通过CSS声明设置，则将返回
未定义的
。在本例中选中它：


let c=document.documentElement.style.getPropertyValue（'--myVariable'）；
警报（--myVariable的值为：‘+（c？c:‘未定义’）
：根{--myVariable:red；}
div{背景色：var（--myVariable）；}
红色背景由--myVariable设置
对于任何与之斗争的人，如果CSS变量是一个句子，则需要将其包装成qoutes

：根目录{
--我的css变量：“你好！”；
}
.选择器：之后{
内容：var（--我的css var）；
}    

这不起作用：

让myVar='你好！（不起作用）；
document.getElementsByTagName（'html'）[0].style.setProperty（'--my css var'，myVar）；

但这确实：

让myVar='你好！(工程);；
document.getElementsByTagName（'html'）[0].style.setProperty（'--my css-var'，'''“+myVar+'”）；
我不记得
——主文本颜色是有效的CSS属性。这是使用前置处理器吗？不是，它是一个css变量。我在这篇文章中了解到了它们是的，这些CSS变量使用“本机”预处理器（基本上，它们最终会事先转换为不动产/属性）。顺便说一句，并非所有浏览器都广泛支持此功能（仅FF，从文章中可以看出。我不知道其他浏览器）-在任何情况下，如果您想在JS中操作它们，您的语法都是不正确的。您需要操作属性（而不是属性），所以请尝试
htmlTag[0].styles.setProperty（“--main text color”，“#FFCF40”）我在中复制了您的答案，现在的错误是它无法设置未定义的属性。我可以麻烦你举一个小提琴的例子吗？这更多的是一个评论而不是一个答案，我没有想到这一点。我会试一试，然后再给你回复。这将覆盖现有的内联样式。是的，你需要像这样修改道具：document.querySelector（“html”）.style.setProperty（'width'，fixed.width+'px'），但是我无法让它工作，我猜
html.style.setProperty（--main background color”，“green”）是执行此操作的首选方法。使用
setAttribute（'style'，…）
将覆盖任何其他内联样式，而
style.cssText=…
被否决，因为它根本不回答问题。@Ced等待！你是说我的回答没有解决OP做主题的需要吗我不确定我是否同意你的意见。只是因为我的回答方式得到广泛支持（而不是使用有限的浏览器支持方式）-请阅读：如何回答（）->答案可以是“不要这样做”，但“尝试这样做”。。。。shrugs由于某种原因，当在这样的转换中使用var时，我无法实现这一点：左：calc（10%-（var（--width）/2））；
document.documentElement.style.setProperty('--somevar', 'green');

// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');