js实现简易换肤

实现简易换肤的方法

通过JavaScript实现简易换肤功能，通常涉及动态修改CSS样式或切换CSS文件。以下是几种常见方法：

使用CSS变量切换主题

定义CSS变量并在JavaScript中修改这些变量值：

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

.dark-theme {
  --primary-color: #2c3e50;
  --secondary-color: #e74c3c;
}

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

动态加载不同CSS文件

通过改变link标签的href属性来切换样式表：

function switchTheme(themeName) {
  const link = document.getElementById('theme-style');
  link.href = `${themeName}.css`;
}

直接修改元素样式

对于简单场景，可以直接修改元素的style属性：

function changeColor(newColor) {
  document.querySelector('.header').style.backgroundColor = newColor;
}

使用classList切换样式类

定义不同主题的CSS类，通过切换类名实现换肤：

.light-theme {
  background: white;
  color: black;
}

.dark-theme {
  background: #333;
  color: white;
}

function setTheme(theme) {
  document.body.className = theme;
}

本地存储主题偏好

结合localStorage保存用户选择的主题：

function saveThemePreference(theme) {
  localStorage.setItem('theme', theme);
  applyTheme(theme);
}

function applyTheme(theme) {
  document.body.className = theme;
}

// 初始化时应用保存的主题
const savedTheme = localStorage.getItem('theme') || 'light-theme';
applyTheme(savedTheme);

注意事项

• 确保颜色对比度符合可访问性标准
• 考虑添加过渡动画提升用户体验
• 移动端需注意性能影响
• 多主题时保持样式命名一致性

这些方法可根据项目复杂度单独或组合使用，CSS变量方案在现代浏览器中推荐优先考虑。