使用jQuery更改CSS变量

是否可以使用jQuery更改CSS中使用的变量？ 简单的例子：

html { --defaultColor: teal; } .box { background: var(--defaultColor); width: 100px; height: 100px; margin: 5px; float: left; } .circle { background: #eee; border: 2px solid var(--defaultColor); width: 100px; height: 100px; margin: 5px; float: left; border-radius: 100%; } 

  Click to Change 
 
 
 
 
 
 
 

例如，如何将变量颜色从蓝绿色更改为红色？ 这个不起作用。

 $("#clickToChange").click(function(){ $(html).css("--defaultColor", "red"); }); 

Answer 1

您可以使用纯JavaScript elem.style.setProperty("variableName", "variableProp");更改css变量elem.style.setProperty("variableName", "variableProp");

 $("html").on('click', function() { $("body").get(0).style.setProperty("--color", "hotpink"); }); 

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

  click me! 

Answer 2

最简单的解决方案恕我直言：更改一个类，然后更改默认颜色：

 html { --defaultColor: teal; } html.someOtherDefaultColor { --defaultColor: rebeccapurple; } $("#clickToChange").click(function(){ $(html).toggleClass("someOtherDefaultColor"); }); 

Answer 3

请参阅问题通过JavaScript或jQuery设置CSS自定义属性（也称为CSS变量）

有问题的方法是document.body.style.setProperty($property, value); 其中$ property是CSS变量。