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, Nov 18 '14 at 09: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, Nov 18 '14 at 09: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](https://stackoverflow.com/a/49048660/8112776)). — ashleedawg, Jan 07 '22 at 13:36
Does this answer your question? [Modify CSS variables / custom properties in jQuery](https://stackoverflow.com/questions/49048192/modify-css-variables-custom-properties-in-jquery) — ashleedawg, Jan 07 '22 at 13:38

score 3 · Answer 1 · answered Nov 18 '14 at 09:13

3

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

answered Nov 18 '14 at 09:13

Ankita

what is -board-bg-color?what happens with this property? – Ankita Nov 18 '14 at 09:39
1

--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. http://www.broken-links.com/2014/08/28/css-variables-updating-custom-properties-javascript/ – Prabhu Thomas Nov 18 '14 at 09:41

1 Answers1