How Can I Dynamically Change CSS :root Variables with JavaScript?

Altering CSS :root Color Variables using JavaScript

In web development, customizing themes often involves utilizing CSS custom properties ("variables") defined within the :root element. To dynamically change these colors via JavaScript, it's essential to understand the correct approach.

One method for setting a CSS variable using JavaScript is through the document.documentElement.style.setProperty function. This function accepts two parameters: the variable name (prefixed with --) and the desired value. For instance, to set the --main-color variable to black:

document.documentElement.style.setProperty('--main-color', '#000000');

This approach ensures that the CSS variable is properly updated and reflects the changes in your JavaScript code.

In the provided code example, the issue is that $(':root').css('--main-color', '#000000') uses the jQuery .css() method, which is designed for inline styles and does not modify CSS variables effectively.

By utilizing the document.documentElement.style.setProperty function as described above, you can successfully change CSS variables in the :root element using JavaScript, enabling dynamic theme customization for your webpage.

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