How Can I Dynamically Change CSS Variables with JavaScript?

How to Alter CSS Variables Dynamically Using JavaScript

In your quest to modify CSS variables using JavaScript, you may have encountered challenges. This query explores a viable solution, elaborating on the correct methodologies to achieve your goal.

The initial approaches attempted, such as setting the '--main-text-color' attribute in HTML or using jQuery's "css()" method, unfortunately yielded invalid attribute errors. The key to successfully editing CSS variables lies in utilizing alternative methods.

One reliable technique involves leveraging the 'el.style.cssText' property. By assigning a CSS string to this property, you can specify multiple CSS variable assignments simultaneously. For instance, to change the '--main-background-color' variable to red, execute the following code:

Another option is to employ the 'el.style.setProperty' method. This method accepts two parameters: the CSS property you wish to modify (e.g., '--main-background-color') and its new value (e.g., 'green'):

Finally, you can also resort to the 'el.setAttribute' method by specifying 'style' as the attribute name and providing a string containing the CSS variable assignment, as seen below:

To illustrate these methods practically, consider the following demo. Upon page load, it renders a background color defined by a CSS variable, which is subsequently altered using JavaScript to demonstrate dynamic variable modification:

[Example Code]

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