JS玩转CSS变量：手把手教你3种方式实时修改变量值

想让网页样式动起来？本文为你揭秘**JS控制CSS变量**的3种实用方法，让你的网页不再千篇一律！通过`document.documentElement.style`对象，你可以轻松修改CSS变量，实现主题切换、动态效果等炫酷功能。文章详细介绍了`setProperty`、`CSSStyleDeclaration`对象操作，以及结合事件监听器实时改变CSS变量值的方法，并提供代码示例。同时，还分享了如何优雅管理大量CSS变量、优化性能，以及兼容老旧浏览器的技巧，让你轻松掌握**JS动态修改CSS变量**的核心技术，打造更具交互性和吸引力的网页！

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变量的值。

切换背景颜色

这个例子监听了按钮的点击事件，每次点击都会随机生成一个颜色值，并将其设置为--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变量，优化性能，并考虑兼容性问题。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~