How Can I Access CSS Variables Using JavaScript?

Accessing CSS Variables in JavaScript

CSS variables are a powerful tool for storing style information in your CSS files. They can be accessed from JavaScript, giving you the ability to dynamically update the appearance of your web application.

To access a CSS variable from JavaScript, you can use the getComputedStyle() method to retrieve the computed styles of an element and then use the getPropertyValue() method to get the value of the desired property.

For example, if you have the following CSS variable declaration:

:root {
  --color-font-general: #336699;
}

You can access the value of this variable in JavaScript using the following code:

getComputedStyle(element).getPropertyValue('--color-font-general');

This will return the value of the --color-font-general CSS variable as a string. You can then use this value to dynamically adjust the appearance of your web application, such as by setting the color of text elements.

Here is an example of how to use this technique to change the color of all text elements in a document:

var elements = document.getElementsByTagName('p');
for (var i = 0, element; element = elements[i++];) {
  element.style.color = getComputedStyle(element).getPropertyValue('--color-font-general');
}

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