How Can I Access CSS Variables in JavaScript?

Accessing CSS Variables in JavaScript

In web development, CSS variables provide a convenient way to store and reuse styles. While these variables can be set and modified directly in CSS, you may encounter the need to access their values in JavaScript.

Accessing CSS variables from JavaScript is straightforward. Here's how it's done:

Step 1: Get the Computed Styles

To obtain the current computed styles for an element, use the getComputedStyle function. This function accepts an element as an argument and returns its computed styles as a CSSStyleDeclaration object.

var style = getComputedStyle(element);

Step 2: Get the Variable Value

Once you have the computed styles, you can access the value of any CSS variable using the getPropertyValue method of the CSSStyleDeclaration object. The getPropertyValue method takes the name of the variable as an argument.

var variableValue = style.getPropertyValue('variable-name');

For instance, to access the CSS variable --color-font-general in the example you provided, you would write:

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

The fontColor variable will now hold the value of the CSS variable, which in this case is #336699.

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