How Can I Dynamically Change CSS Variables Using JavaScript?

Editing CSS Variables with JS

You're attempting to edit CSS variables to dynamically control the styling of your project. While you've defined variables such as --main-background-image and --main-text-color, you're facing an error when trying to change their values using attributes.

Root Cause

The error you encountered is due to an incorrect usage of the setAttribute method to change CSS variables.

Solution

There are three methods for editing CSS variables with JS:

• style.cssText:

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

• style.setProperty:

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

• setAttribute (with "style" attribute):

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

In your code snippet, replace the commented lines with one of the above methods to successfully edit the CSS variables.

Demo

Consider the following example:

html {
  --main-background-color: rgba(0,0,0,.25);
}

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

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

In this demo, the --main-background-color value changes to red two seconds after page load.

The above is the detailed content of How Can I Dynamically Change CSS Variables Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!