javascript variable to css code example

Example 1: css set variable

:root {
  --main-bg-color: coral;
}

#div1 {
  background-color: var(--main-bg-color);
}

#div2 {
  background-color: var(--main-bg-color);
}

Example 2: how to change css variable in javascript

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

Example 3: how to change css variable in javascript

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