How do I use CSS variables in JavaScript?

How do I use CSS variables in JavaScript?

You can access CSS variables in JavaScript using the getComputedStyle method. For example, if you have a CSS variable defined like this: --main-color: blue;, you can retrieve it in JavaScript like this:

const root = document.documentElement;
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');
console.log(mainColor); // Outputs: blue

Can I change the value of a CSS variable using JavaScript?

Yes, you can change the value of a CSS variable using JavaScript. You can set it directly on the style property of an element. For example:

root.style.setProperty('--main-color', 'red');

What are the benefits of using CSS variables?

CSS variables allow for easier theming and maintenance of styles. You can define a variable once and reuse it throughout your stylesheets, making it simple to update styles globally.

Are there any browser compatibility issues with CSS variables?

CSS variables are supported in all modern browsers, but if you need to support older browsers like Internet Explorer, you might need to use a fallback.