Change CSS variable using jQuery [duplicate]

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 gist.github.com/jcubic/9ef9fa2561de8430e953e2fe62011c20 — jcubic
– jcubic, Commented Jan 24, 2018 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
– izogfif, Commented Sep 23, 2020 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
– jcubic, Commented Sep 24, 2020 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). — ashleedawg
– ashleedawg, Commented Jan 7, 2022 at 13:33

MattDiMu · Accepted Answer · 2016-06-23 22:22:59Z

63

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, 2016 at 22:22

MattDiMu

5,0431 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DinoMyte Over a year ago

In jquery, you can do : $("html").attr("style","--defaultColor:hotpink");

David Thomas Over a year ago

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. :)

t4d_ Over a year ago

Thanks both @MattDiMu and @ DinoMyte for working solutions.

Dave Land Over a year ago

@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.

Iwan Ross Over a year ago

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 :-)

Community · Accepted Answer · 2017-05-23 12:18:17Z

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, 2017 at 12:18

CommunityBot

11 silver badge

answered Jun 23, 2016 at 22:26

David Vaughan

1211 silver badge5 bronze badges

Comments

Lazerbeak12345 · Accepted Answer · 2020-11-11 07:15:00Z

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, 2020 at 7:15

Lazerbeak12345

4981 gold badge6 silver badges23 bronze badges

answered Jun 23, 2016 at 22:17

C3roe

97.6k15 gold badges100 silver badges172 bronze badges

7 Comments

Adam Buchanan Smith Over a year ago

That what I was thinking too.

David Thomas Over a year ago

While this provides a functioning solution, and answers the second part of the question, it rather avoids answering the first question that was asked.

C3roe Over a year ago

@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.

David Thomas Over a year ago

Oh, I fully agree with the solution, and it's certainly easier than trying to access and change CSS variables directly.

MattDiMu Over a year ago

@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.

|

Collectives™ on Stack Overflow

Change CSS variable using jQuery [duplicate]

3 Answers 3

5 Comments

Comments

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

7 Comments

Linked

Related