JavaScript 获取 CSS 中定义的变量

需求

动态获取CSS中定义的主颜色。

CSS

#root {
    --color: red;
}

.my-div {
    --color: red;
}

JavaScript

使用getComputedStyle方法。

获取全局变量

const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--color').trim();

获取局部变量

const element = document.querySelector('.my-div');
const elementStyles = getComputedStyle(element);
const mainColor = elementStyles.getPropertyValue('--color').trim();