在JS中如何使用Css变量

要在JavaScript中读取或修改CSS变量，你可以使用window.getComputedStyle()方法结合getPropertyValue()方法，或者使用element.style.setProperty()方法。

读取CSS变量：

// 获取某个元素的计算样式对象
const style = window.getComputedStyle(document.documentElement);
// 获取CSS变量的值
const mainColor = style.getPropertyValue('--main-color');
console.log(mainColor); // 输出：#3498db

修改CSS变量：

// 直接在:root元素上设置CSS变量（通常用于全局变量）
document.documentElement.style.setProperty('--main-color', '#2ecc71');
// 或者在特定元素上设置CSS变量（仅影响该元素）
document.querySelector('div').style.setProperty('--main-color', '#f1c40f');

注意事项： 当你在JavaScript中修改CSS变量时，如果你想要这个变化立即生效（特别是在某些浏览器中），可能需要使用!important规则或者在修改之后强制浏览器重新计算样式。例如：

document.documentElement.style.setProperty('--main-color', '#2ecc71', 'important');

或者在修改后触发重绘或回流，例如：

document.body.offsetHeight; // 触发重绘

使用CSS变量可以让你更方便地在多个地方共享样式值，并通过JavaScript动态改变这些值，从而实现更灵活的样式管理。

通过上述方法，你可以在JavaScript中灵活地使用和操作CSS变量。