JS操作CSS变量，动态切换主题样式方法

本文深入讲解了如何利用JavaScript高效操作CSS自定义属性（变量）实现轻量、灵活且可持久化的动态主题切换，涵盖通过`style.setProperty()`设置和`getComputedStyle().getPropertyValue()`读取全局变量的核心方法，强调将变量挂载于`:root`以确保全局生效；同时推荐采用预设主题class配合JS切换的工程化方案，兼顾样式集中管理、CSS过渡动画支持与可维护性，并结合`localStorage`保存用户偏好及监听系统深色模式作为优雅回退，真正实现开箱即用、刷新不丢失、细节严谨的主题系统。

JavaScript 可以通过 style.setProperty() 和 getComputedStyle().getPropertyValue() 直接读写 CSS 自定义属性（即 CSS 变量），这是实现动态主题切换最轻量、最推荐的方式。

设置 CSS 变量（修改主题色、字体等）

把变量挂载在 :root 上，就能全局生效。JS 中用 document.documentElement.style 操作：

• 设置单个变量：document.documentElement.style.setProperty('--primary-color', '#4a6fa5');
• 批量设置（适合主题对象）：

  const theme = { '--primary-color': '#ff6b6b', '--bg-color': '#f8f9fa', '--text-color': '#333' };
  Object.entries(theme).forEach(([prop, val]) => {
    document.documentElement.style.setProperty(prop, val);
  });

• 注意变量名要带两个短横线前缀（--），且大小写敏感。

读取 CSS 变量（获取当前主题值）

用 getComputedStyle 从 :root 获取，返回的是计算后的字符串（含单位）：

• 基础读取：const color = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); // → "#4a6fa5"
• 读取后可做逻辑判断，比如判断当前是否为深色模式：if (color === '#1a1a1a') { /* 深色主题逻辑 */ }
• 注意：未定义的变量会返回空字符串，建议加默认回退处理。

配合 class 切换实现多主题预设

不推荐纯 JS 写死所有变量，更优雅的方式是预定义几套主题 class，在 CSS 中声明对应变量，JS 只负责切 class：

• CSS 中：

  :root { --primary-color: #007bff; }
  .theme-dark { --primary-color: #0056b3; --bg-color: #212529; }
  .theme-high-contrast { --primary-color: #e60000; }

• JS 切换：document.documentElement.className = 'theme-dark'; 或 document.documentElement.classList.toggle('theme-dark');
• 优势：样式集中管理、支持 CSS 过渡动画、便于维护和扩展。

持久化主题选择（刷新不丢失）

把用户偏好存到 localStorage，页面加载时恢复：

• 保存：localStorage.setItem('theme', 'theme-dark');
• 初始化时读取并应用：

  const savedTheme = localStorage.getItem('theme');
  if (savedTheme && document.body.classList.contains(savedTheme)) {
    document.documentElement.className = savedTheme;
  }

• 也可监听系统级深色模式（prefers-color-scheme）作为默认 fallback。

基本上就这些。核心就三点：变量定义在 :root、JS 用 setProperty/getPropertyValue 操作、搭配 class + localStorage 做工程化管理。不复杂但容易忽略细节，比如变量名格式、trim 空格、CSS 作用域范围等。

以上就是《JS操作CSS变量，动态切换主题样式方法》的详细内容，更多关于的资料请关注golang学习网公众号！