How to Edit a CSS Variable Using Js

How do I edit a CSS variable using JS?

Turns out changing CSS variables is possible using the el.style.cssText property, or el.style.setProperty or el.setAttribute methods. In your code snippets el.setAttribute is incorrectly used, which is causing the error you encountered. Here's the correct way:

document.documentElement.style.cssText = "--main-background-color: red";

document.documentElement.style.setProperty("--main-background-color", "green");

document.documentElement.setAttribute("style", "--main-background-color: green");

Demo

The following demo defines a background color using a CSS variable, then changes it using the JS snippet 2 seconds after loading.

window.onload = function() {
  setTimeout(function() {
    document.documentElement.style.cssText = "--main-background-color: red";
  }, 2000);
};

html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}

body {
  background-color: var(--main-background-color);
}

How can I create CSS variables with JavaScript?

Yes, you can do it via .setProperty() method:

const root = document.documentElement;
root.style.setProperty('--first-color', 'red');
root.style.setProperty('--second-color', 'blue');

p {
  color: var(--first-color);
}

div {
  color: var(--second-color);
}

<p>First color</p>
<div>Second color</div>

How can I change CSS variable on button click?

You are trying to change the value of one variable with another variable.

You will need getComputedStlye():

:root{
    --in: inset 25px 25px 60px red;
    --out: inset -25px -25px 60px green;
}
.color_1{
    background-color: blue;
    border-radius: 200px;
    height: 300px;
    width: 300px;
    box-shadow: var(--out);
}

<body>
<section>
<button class="color_1">

</button>

<script>
    const btn = document.querySelector('button')
    const state = '--out'
    btn.addEventListener('click', _ =>{  document.documentElement.style.setProperty(state, getComputedStyle(document.documentElement).getPropertyValue('--in'));
    });
</script>

</section>
</body>

How to change CSS :root color variables in JavaScript

Thank you @pvg for providing the link. I had to stare at it for a little to understand what was going on, but I finally figured it out.

The magical line I was looking for was this:

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

That did exactly what I wanted it to do, thank you very much!

Is it possible to change a css variable using js setProperty with a value of another js variable?

Yes, just like you have.

Doing this is most of the point of CSS custom properties.

setTimeout(function() {  const elem = document.getElementById("one");  const anotherJsVariable = "yellow";  elem.style.setProperty('--my-custom-property', anotherJsVariable);}, 750);

#one {  --my-custom-property: red;  background-color: var(--my-custom-property);}
#two {  background-color: white;}
#three {  background-color: var(--my-custom-property);}
div {  display: inline-block;  padding: 1em;}

<div id="one">  <div id="two">    <div id="three">
    </div>  </div></div>

Is it possible to change CSS Variables globally via jQuery?

Since the variable is a global, you can set it anywhere in a style and the value will be updated.

$("div").click(function() {
    this.setAttribute("style", "--text_color: rgb(255, 255, 255);");
});

However, I would suggest you don't modify the global variable but to update a class name instead. Have a list off root variables and use different values in different classes:

:root {
    --text-color1: rgb(0, 0, 255);
    --text-color2: rgb(0, 255, 255);
}
.class1 {
    color: var(--text-color1);
}
.class2 {
    color: var(--text-color1);
}

Now you can change the class name on click:

$("div").click(function() {
   this.className = "class2";
});