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"); }); 

Answer 1

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!