答案：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变量：
立即学习“Java免费学习笔记（深入）”；
// 获取根元素
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上的内联样式。如果你想读取从样式表（无论是内联