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变量的值。
<!DOCTYPE html> <html> <head> <title>动态CSS变量</title> <style> :root { --bg-color: #f0f0f0; } body { background-color: var(--bg-color); transition: background-color 0.3s ease; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <button id="changeColorBtn">切换背景颜色</button> <script> const button = document.getElementById('changeColorBtn'); const root = document.documentElement; button.addEventListener('click', function() { // 随机生成一个颜色值 const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); root.style.setProperty('--bg-color', randomColor); }); </script> </body> </html>
这个例子监听了按钮的点击事件，每次点击都会随机生成一个颜色值，并将其设置为–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文件即可。
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script> <script> cssVars({}); </script>
需要注意的是，polyfill会增加页面的加载时间，因此只在需要兼容老旧浏览器时才使用。
总的来说，JS控制CSS变量是一种强大的技术，可以实现各种各样的动态效果。但也要注意管理好CSS变量，优化性能，并考虑兼容性问题。
