主题切换之根元素CSS自定义类
要实现CSS样式的主题切换，可以通过在HTML中添加一个按钮来触发JavaScript事件，进而通过JavaScript动态修改HTML元素的class或直接切换CSS文件，以达到改变页面整体风格的目的。以下是实现这一功能的步骤、原理及代码示例。
原理：
- HTML结构：提供一个用户界面元素（如按钮）来触发切换操作。
- CSS样式：定义两套样式，一套为默认主题，另一套为备用主题（比如夜间模式）。备用主题的样式通常通过类名（如
.night-mode)来控制。 - JavaScript：编写逻辑来响应用户的切换请求，通过修改HTML元素的class或更改
<link>标签的href属性来应用新的主题样式。
示例代码：
HTML (index.html)
html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>主题切换示例</title><!-- 引入默认CSS样式 --><link rel="stylesheet" href="styles.css" id="themeStyles">
</head>
<body><header><h1>主题切换演示</h1></header><main><p>这是一个示例文本，用于展示主题切换效果。</p><button id="toggleTheme">切换主题</button></main><!-- 引入JavaScript文件 --><script src="script.js"></script>
</body>
</html>
CSS (styles.css)
css/* 默认主题样式 */
body {background-color: white;color: black;
}/* 夜间主题样式，通过类名控制 */
body.night-mode {background-color: #333;color: white;
}
JavaScript (script.js)
javascript// 获取切换主题按钮
const toggleButton = document.getElementById('toggleTheme');// 定义切换主题的函数
function toggleTheme() {// 获取当前文档的根元素，即bodyconst bodyElement = document.body;// 判断是否已应用夜间模式类名if (bodyElement.classList.contains('night-mode')) {// 如果已应用，移除它，恢复到默认主题bodyElement.classList.remove('night-mode');} else {// 如果未应用，添加夜间模式类名bodyElement.classList.add('night-mode');}
}// 绑定按钮点击事件
toggleButton.addEventListener('click', toggleTheme);
过程说明：
- 用户访问页面时，看到的是由
styles.css定义的默认主题样式。 - 当用户点击“切换主题”按钮时，会触发
toggleTheme函数。 toggleTheme函数通过检查body元素是否具有.night-mode类来判断当前主题，并据此添加或移除该类，从而在默认主题和夜间主题之间切换。- 由于CSS中已经定义了
.night-mode类对应的样式，所以页面的外观会立即响应这些变化，实现主题的即时切换。