JavaScript修改CSS变量的3种方法
本文深入探讨了JavaScript操作CSS变量的多种方法，重点介绍了如何利用`document.documentElement.style`和`window.getComputedStyle()`来设置和读取CSS变量，实现动态样式控制。文章不仅提供了详细的代码示例，展示了如何通过`element.style.setProperty()`设置变量值，以及`getComputedStyle(element).getPropertyValue()`读取变量值，还分享了在实际项目中应用CSS变量的常见场景，如主题切换、响应式调整、用户偏好持久化和组件化定制。此外，还总结了操作CSS变量时需要注意的潜在陷阱和最佳实践，包括变量作用域、值类型与单位、性能优化、语义化命名以及提供默认值。最后，文章还探讨了CSS变量的动画与过渡效果，介绍了通过过渡使用变量的CSS属性实现平滑效果，以及利用CSS Houdini的`@property`注册可动画的自定义属性等进阶玩法，为开发者提供了全面的CSS变量操作指南。
答案：JavaScript通过element.style.setProperty()设置CSS变量，getComputedStyle(element).getPropertyValue()读取变量值，实现动态样式控制。该方法支持主题切换、响应式调整、用户偏好持久化和组件化定制，需注意变量作用域、值类型与单位、性能优化，并推荐语义化命名及提供默认值。动画方面，通常通过过渡使用变量的CSS属性实现平滑效果，或利用CSS Houdini的@property注册可动画的自定义属性，但需考虑浏览器兼容性。
使用JavaScript操作CSS变量，核心在于利用element.style.setProperty()来设置变量值，以及getComputedStyle(element).getPropertyValue()来读取变量值。这种方法让前端开发拥有了前所未有的灵活性，能够实现更动态、响应式的样式控制，而无需反复修改DOM元素的多个样式属性。
解决方案
我个人在项目中大量依赖CSS变量来管理主题和动态样式，它真的让样式和逻辑的解耦变得优雅。要用JavaScript来操作这些变量，其实原理挺直接的。
首先，你需要知道你想操作哪个元素的CSS变量。通常，我们会把全局变量定义在:root伪类上，它等同于document.documentElement，也就是标签。
设置CSS变量：
// 获取根元素
const root = document.documentElement;
// 设置一个全局CSS变量 --primary-color 的值
root.style.setProperty('--primary-color', '#3498db');
// 你也可以设置特定元素的CSS变量
const myElement = document.getElementById('my-component');
if (myElement) {
myElement.style.setProperty('--component-bg', 'red');
}
// 甚至可以设置一个带有单位的变量
root.style.setProperty('--base-font-size', '16px');这里setProperty(propertyName, value, priority)方法非常关键。propertyName就是你的CSS变量名（比如--primary-color），value是你想赋给它的值。priority可选，通常不需要。
读取CSS变量：
读取变量稍微复杂一点，因为element.style.getPropertyValue()只会返回通过JavaScript直接设置在element.style上的内联样式。如果你想读取从样式表（无论是内联
