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变量方案在现代浏览器中推荐优先考虑。
