Change CSS variable using jQuery

Question

Is it possible to change a variable used in CSS using jQuery? Simple example:

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>

How can I change the variable color from teal to red for example? This one doesn't work.

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

Here is my monkey patch of css method so you can use css variables with `.css` method https://gist.github.com/jcubic/9ef9fa2561de8430e953e2fe62011c20 — jcubic, Jan 24 '18 at 13:48
@jcubic I'd say that this should be posted as a separate answer since none of other answers addresses the "chain jQuery methods issue", so I can't write `$(body).css('--css-var', 'var-value').html('This is body element').addClass('some-class')`. — izogfif, Sep 23 '20 at 11:54
@izogfif this is outdated question you can now use jQuery with CSS properties I think it was added in 3.4 version and you should use 3.5 because there was vulnerability in <3.5 — jcubic, Sep 24 '20 at 12:50
**Set a single css variable/property:** `$(":root").css("--defaultColor", "red");` . . . or you can **Set multiple css variables:** `$(":root").css({"--myVar0":myVal0, "--myVar1":myVal1});`, etc... much tidier than non-jQuery solutions IMHO. ([source](https://stackoverflow.com/a/49048660/8112776)). — ashleedawg, Jan 07 '22 at 13:33

score 57 · Accepted Answer · answered Jun 23 '16 at 22:22

57

You may change the css variable using plain JavaScript 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!

answered Jun 23 '16 at 22:22

MattDiMu

4,873
1
19
29

25

In jquery, you can do : $("html").attr("style","--defaultColor:hotpink"); – DinoMyte Jun 23 '16 at 22:25
Nicely done, I honestly didn't think that this is, or would be, possible without some use of regular expressions! I'm glad to have been proven wrong. :) – David Thomas Jun 23 '16 at 22:25
1

Thanks both @MattDiMu and @ DinoMyte for working solutions. – t4d_ Jun 23 '16 at 22:27
@DinoMyte's is the only one that worked for me. I'm a total jQuery Noob, so this is the kind of help I need. – Dave Land Aug 28 '18 at 22:12
1

Excellent, thank you! I created a radial progress bar for my app and this was the answer I needed to set the progress in motion :-) – Iwan Ross Aug 14 '19 at 08:45

score 2 · Answer 2 · edited May 23 '17 at 12:18

2

See question Setting a CSS custom property (aka CSS variable) through JavaScript or jQuery

The method in question is document.body.style.setProperty($property, value); where $property is the CSS variable.

edited May 23 '17 at 12:18

Community

1
1

answered Jun 23 '16 at 22:26

David Vaughan

111
1
5

score 1 · Answer 3 · edited Nov 11 '20 at 07:15

1

Simplest solution IMHO: Change a class, that in turn changes the default color:

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

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

edited Nov 11 '20 at 07:15

Lazerbeak12345

309
4
19

answered Jun 23 '16 at 22:17

CBroe

91,630
14
92
150

That what I was thinking too. – Adam Buchanan Smith Jun 23 '16 at 22:18
2

While this provides a functioning solution, and answers the second part of the question, it rather avoids answering the first question that was asked. – David Thomas Jun 23 '16 at 22:18
@DavidThomas, granted, but also, _that depends_ - it might as well solve the underlying problem (of simply getting this done) that was asked for. And in most places where it is possible to achieve something like this in this way, many also consider it to be the preferable way, regarding separation of concerns. – CBroe Jun 23 '16 at 22:20
Oh, I fully agree with the solution, and it's certainly easier than trying to access and change CSS variables directly. – David Thomas Jun 23 '16 at 22:23
@DavidThomas it is possible as i've just shown below and there are many use-cases where you should do it. E.g. when you don't have a fixed set of possible values, because the user may choose a color himself. – MattDiMu Jun 23 '16 at 22:25
@Matt: indeed you have, and I already commented on that answer. – David Thomas Jun 23 '16 at 22:27
But with this solution it would not be possible to do calculations via js, for example, would it? (even this might actually not be part of this specific question) – Garavani Feb 27 '19 at 16:42

Change CSS variable using jQuery

3 Answers3

Linked