How to get css variables with javascript

本文链接：https://blog.csdn.net/yuguo_im/article/details/135467994

To get CSS variables with JavaScript, you can use the getComputedStyle() function along with the getPropertyValue() method. Here’s an example:

// Get the CSS variable value
const rootStyles = getComputedStyle(document.documentElement);
const cssVariableValue = rootStyles.getPropertyValue('--my-color-variable');

console.log(cssVariableValue);

In this example, --my-color-variable is the name of the CSS variable you want to retrieve. The getComputedStyle() function is called on the document.documentElement to get the computed styles of the root element (usually <html>). Then, the getPropertyValue() method is used to retrieve the value of the CSS variable.

The retrieved value will include any units or other characters defined in the CSS variable. For example, if the CSS variable is defined as --my-color-variable: #ff0000;, the retrieved value will be "#ff0000".

You can use this technique to dynamically access and use CSS variables in your JavaScript code. This is particularly useful when you want to apply CSS variable values to elements or perform calculations based on the values defined in CSS variables.