如何使用JS编辑CSS变量？

我有这些CSS变量来控制我的项目的颜色，所以我可以做主题。如何使用JS编辑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"); 
}

the error message

来源

2016-12-28 David Richards

我不记得'--main-text-color'是一个有效的CSS属性。那是使用预处理器吗？ – ochi

不，它是一个css变量。我在这篇文章中发现了他们 –

https：//www.broken-links。COM/2014/08/28/CSS-变量更新管理自定义属性的JavaScript/ –

原来改变CSS变量可以使用el.style.cssText财产，或el.style.setProperty或el.setAttribute方法。在您的代码片段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可变背景颜色，然后改变它使用JS片段。

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

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变量显然工作。

来源

2016-12-28 23:16:37

这将覆盖现有的内联样式。 – Oriol

它可能会更容易地定义你的CSS包含各种主题风格类（.theme1 {...}，.theme2 {...}等），然后更改基于所选值与JS类。

来源

2016-12-28 22:59:14 johnniebenson

这是比回答更多的评论 – ochi

我没有想到这一点。我会给你一个机会，并回复你 –

你可以添加类似如下（不使用类变量）

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>

来源

2016-12-28 23:22:14 ochi

Downvoted，因为它根本不回答问题。 – Ced

@等待！你是否说我的回答没有解决OP需要做主题？ - 我不确定我会同意你的意见。仅仅因为我以广泛支持的方式回答（而不是使用有限的浏览器支持方法），请阅读：如何回答（https://stackoverflow.com/help/how-to-answer） - >答案可以是“不要这样做”，但“试试这个”**耸耸肩膀** – ochi

改变了我的投票 – Ced

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

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

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

来源

2016-12-28 23:27:02 Oriol

如果您正在使用:root：

:root { 
    --somevar: black; 
}

这将是documentElement。

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

来源

2017-11-08 06:08:03 Blauhirn

如何使用JS编辑CSS变量？

回答

相关问题