当前位置：首页 > JavaScript

js实现简易换肤

2026-03-01 12:44:08JavaScript

实现简易换肤的 JavaScript 方法

动态修改 CSS 类名

通过切换 HTML 元素的类名来应用不同的样式。定义多套 CSS 主题类，例如：

.theme-light {
  background: #fff;
  color: #333;
}
.theme-dark {
  background: #222;
  color: #eee;
}

JavaScript 切换逻辑：

document.getElementById('theme-toggle').addEventListener('click', function() {
  document.body.classList.toggle('theme-dark');
  document.body.classList.toggle('theme-light');
});

使用 CSS 变量动态控制

在根元素定义 CSS 变量：

:root {
  --primary-bg: #ffffff;
  --primary-text: #000000;
}
.dark-theme {
  --primary-bg: #222222;
  --primary-text: #ffffff;
}

通过 JavaScript 切换主题类：

js实现简易换肤

function toggleTheme() {
  document.documentElement.classList.toggle('dark-theme');
}

通过修改 link 标签切换样式表

准备多套 CSS 文件（如 light.css 和 dark.css），动态切换：

function switchTheme(themeName) {
  const link = document.querySelector('link[rel="stylesheet"]');
  link.href = `${themeName}.css`;
}

localStorage 持久化存储主题

结合 localStorage 保存用户选择：

js实现简易换肤

// 初始化时读取
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.className = savedTheme;

// 切换时保存
function toggleTheme() {
  const newTheme = document.documentElement.className === 'dark' ? 'light' : 'dark';
  document.documentElement.className = newTheme;
  localStorage.setItem('theme', newTheme);
}

完整示例代码

HTML 结构：

<button id="theme-toggle">切换主题</button>

JavaScript 实现：

const toggleBtn = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', currentTheme);

toggleBtn.addEventListener('click', () => {
  const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' 
    ? 'light' 
    : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});

对应 CSS：

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #333333;
}
[data-theme="dark"] {
  --bg-color: #222222;
  --text-color: #eeeeee;
}
body {
  background: var(--bg-color);
  color: var(--text-color);
}