使用 jQuery 更改 CSS 变量 [重复]答案

【问题标题】：Change CSS variable using jQuery [duplicate]使用 jQuery 更改 CSS 变量 [重复]
【发布时间】：2016-10-26 10:33:30
【问题描述】：

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

【问题讨论】：

这是我的 css 方法的猴子补丁，因此您可以将 css 变量与 .css 方法 gist.github.com/jcubic/9ef9fa2561de8430e953e2fe62011c20 一起使用
@jcubic 我想说这应该作为一个单独的答案发布，因为其他答案都没有解决“链 jQuery 方法问题”，所以我不能写$(body).css('--css-var', 'var-value').html('This is body element').addClass('some-class')。
@izogfif 这是一个过时的问题，你现在可以使用带有 CSS 属性的 jQuery 我认为它是在 3.4 版本中添加的，你应该使用 3.5，因为中存在漏洞
设置单个 css 变量/属性： $(":root").css("--defaultColor", "red"); 。 . .或者您可以设置多个 css 变量： $(":root").css({"--myVar0":myVal0, "--myVar1":myVal1}); 等...比非 jQuery 解决方案恕我直言。 (source)。

标签： jquery css variables

【解决方案1】：

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

$("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!

【讨论】：

在jquery中，你可以这样做：$("html").attr("style","--defaultColor:hotpink");
干得好，老实说，如果不使用一些正则表达式，我真的不认为这是可能的，或者将是可能的！我很高兴被证明是错误的。 :)
感谢@MattDiMu 和@DinoMyte 提供有效的解决方案。
@DinoMyte's 是唯一对我有用的。我是一个 jQuery Noob，所以这是我需要的帮助。
太好了，谢谢！我为我的应用程序创建了一个径向进度条，这是我设置进度所需的答案:-)

【解决方案2】：

见问题Setting a CSS custom property (aka CSS variable) through JavaScript or jQuery

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

我也是这么想的。
虽然这提供了一个有效的解决方案，并回答了问题的第二部分，但它却避免回答所提出的第一个问题。
@DavidThomas，授予，但也，这取决于 - 它也可以解决所要求的潜在问题（只需完成此操作）。在大多数可以通过这种方式实现类似目标的地方，许多人也认为它是关注点分离的更可取的方式。
哦，我完全同意这个解决方案，而且它肯定比尝试直接访问和更改 CSS 变量更容易。
@DavidThomas 正如我刚刚在下面显示的那样，这是可能的，并且有很多用例你应该这样做。例如。当您没有一组固定的可能值时，因为用户可以自己选择颜色。