js控制css变量可通过document.documentelement.style对象实现，具体包括三种方式：一是直接使用setproperty方法修改变量，如root.style.setproperty('--my-variable', 'red')；二是通过cssstyledeclaration对象操作，同样调用setproperty和getpropertyvalue方法；三是结合事件监听器动态修改变量，例如点击按钮随机改变背景色。此外，管理大量变量时可封装成模块，提升维护性，如将主题逻辑集中到theme.js中。性能方面应减少频繁修改、使用requestanimationframe及批量更新。兼容老旧浏览器可引入css-vars-ponyfill polyfill。
JS控制CSS变量，说白了就是让网页的样式不再是铁板一块，而是能随着用户的操作、数据的变化而灵活改变。这能带来更丰富的交互体验，比如主题切换、动态效果等等。
解决方案
JS控制CSS变量的核心在于document.documentElement.style这个对象。通过它，我们可以读取、修改CSS变量的值，从而改变元素的样式。
方式一：直接修改 style 对象
立即学习“前端免费学习笔记（深入）”；
这是最直接的方式，通过setProperty方法来设置CSS变量的值。
// 获取根元素
const root = document.documentElement;
// 设置CSS变量
root.style.setProperty('--my-variable', 'red');
// 获取CSS变量的值
const myVariable = getComputedStyle(root).getPropertyValue('--my-variable');
console.log(myVariable); // 输出 "red"这种方式简单粗暴，但也很有效。需要注意的是，CSS变量名要以--开头。
方式二：使用 CSSStyleDeclaration 对象
document.documentElement.style返回的是一个CSSStyleDeclaration对象，它提供了一些更方便的方法来操作样式。
const root = document.documentElement;
// 设置CSS变量
root.style.setProperty('--my-variable', '20px');
// 获取CSS变量的值
console.log(root.style.getPropertyValue('--my-variable')); // 输出 "20px"这种方式和第一种方式本质上是一样的，只是写法上略有不同。
方式三：结合事件监听器和函数
为了实现动态修改，通常需要结合事件监听器，例如监听鼠标移动、键盘输入等事件，然后根据事件触发的条件来修改CSS变量的值。
动态CSS变量
这个例子监听了按钮的点击事件，每次点击都会随机生成一个颜色值，并将其设置为--bg-color变量的值，从而动态改变页面的背景颜色。
如何优雅地管理大量的CSS变量？
当项目变得复杂，CSS变量的数量也会增多。这时，就需要考虑如何更好地管理这些变量，避免代码变得混乱。
一种方法是将CSS变量的定义和修改逻辑封装成函数或模块。例如，可以创建一个theme.js模块，专门负责处理主题相关的CSS变量。
// theme.js
const root = document.documentElement;
export function setTheme(themeName) {
switch (themeName) {
case 'dark':
root.style.setProperty('--text-color', '#fff');
root.style.setProperty('--bg-color', '#333');
break;
case 'light':
root.style.setProperty('--text-color', '#000');
root.style.setProperty('--bg-color', '#fff');
break;
default:
break;
}
}然后在其他地方引入这个模块，调用setTheme函数来切换主题。
import { setTheme } from './theme.js';
const themeButton = document.getElementById('themeButton');
themeButton.addEventListener('click', function() {
const currentTheme = localStorage.getItem('theme') || 'light';
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
});这样做的好处是，将主题相关的逻辑集中管理，方便维护和扩展。
CSS变量动态修改的性能考量
虽然动态修改CSS变量很灵活，但也需要注意性能问题。频繁地修改CSS变量可能会导致页面重绘，影响用户体验。
为了优化性能，可以考虑以下几点：
- 减少不必要的修改： 只有在必要的时候才修改CSS变量的值。
-
使用
requestAnimationFrame： 将修改CSS变量的操作放在requestAnimationFrame回调函数中，可以避免浏览器频繁重绘。 - 批量修改： 如果需要同时修改多个CSS变量，尽量一次性修改，而不是多次修改。
function updateStyles() {
root.style.setProperty('--width', newWidth + 'px');
root.style.setProperty('--height', newHeight + 'px');
}
requestAnimationFrame(updateStyles);如何在不同的浏览器中兼容CSS变量？
虽然CSS变量已经被大多数现代浏览器支持，但在一些老旧的浏览器中可能无法正常工作。为了兼容这些浏览器，可以使用polyfill。
一个常用的polyfill是css-vars-ponyfill。它可以让不支持CSS变量的浏览器也能使用CSS变量。
使用方法很简单，只需要在页面中引入css-vars-ponyfill的JavaScript文件即可。
需要注意的是，polyfill会增加页面的加载时间，因此只在需要兼容老旧浏览器时才使用。
总的来说，JS控制CSS变量是一种强大的技术，可以实现各种各样的动态效果。但也要注意管理好CSS变量，优化性能，并考虑兼容性问题。
