使用 jQuery 更改 CSS 变量

Question

是否可以使用 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%;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickToChange" type="button" style="width: 100%;">Click to Change</button>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br/>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

例如，如何将可变颜色从蓝绿色更改为红色？这个不行

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

原文由 t4d_ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 $("html").on('click', function() {

  $("body").get(0).style.setProperty("--color", "hotpink");

});

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

click me!

原文由 MattDiMu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 html {
  --defaultColor: teal;
}
html.someOtherDefaultColor {
  --defaultColor: rebeccapurple;
}

 $("#clickToChange").click(function(){
  $(html).toggleClass("someOtherDefaultColor");
});

原文由 CBroe 发布，翻译遵循 CC BY-SA 4.0 许可协议