How can I modify a CSS variable using jQuery

Question

I have a CSS with a variable set in it. I know how to change the value for the variable using plain Javascript. I need to do the same using jQuery.

This is the code I have...

<style>
  :root{
    --board-bg-color:#7DD0D6;
  }
<style>

To change the value of "--board-bg-color" in plain Javascript, I can use

document.body.style.setProperty("--board-bg-color", "#"+Color);

I need to know if there is an equivalent in jQuery.

I have tried using the css function for body and document, but it doesn't work

~~jQuery("body").css("--board-bg-color","#"+Color);~~

if you can do this with vanilla JS with what looks like a pretty simple bit of code - then why would you want to do this with jQuery? Additionally, css variables are experimental and have next to no browser support - why are you using them? If you need variables, at this stage, use something like sass. — Novocaine
– Novocaine, Commented Nov 18, 2014 at 9:48
I know, right now there is very little support for CSS variables (only FF 31+ supports it). I am doing an small intranet app where the target population will be using only FF :) — Prabhu Thomas
– Prabhu Thomas, Commented Nov 18, 2014 at 9:52
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:36
Does this answer your question? Modify CSS variables / custom properties in jQuery — ashleedawg
– ashleedawg, Commented Jan 7, 2022 at 13:38

Ankita · Accepted Answer · 2014-11-18 09:13:23Z

3

$("body").css("--board-bg-color","#"+Color);

answered Nov 18, 2014 at 9:13

Ankita

6132 gold badges9 silver badges25 bronze badges

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

2 Comments

Ankita Over a year ago

what is -board-bg-color?what happens with this property?

Prabhu Thomas Over a year ago

--board-bg-color is a custom CSS variable that I am using. This variable can be used in the CSS as a replacement for the value. Changing the value in the variable, reflects everywhere in the CSS. Check this for more info on CSS variables. broken-links.com/2014/08/28/…

Collectives™ on Stack Overflow

How can I modify a CSS variable using jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related