本文介绍两种可靠的 css 主题切换方案：一是修正原生 `link` 标签 `href` 动态替换逻辑，避免索引错乱；二是推荐更健壮的“单页多样式+html类控制”模式，支持无刷新、可扩展、易维护的主题系统。
你遇到的问题根源在于使用了 Array.prototype.shift() —— 每次点击都会永久移除并重排数组，导致第二次点击时 stylesUrls 变为空数组（或只剩一个元素），进而引发 undefined 赋值给 style.href，使样式表失效且无法恢复。
✅ 方案一：修复 href 切换逻辑（推荐初学者理解）
核心是用索引变量代替数组操作，确保循环切换稳定可靠：
<link rel="stylesheet" href="claires.css" id="ss" type="text/css"> <button id="themes">Switch Theme</button>
const stylesUrls = [
"claires.css",
"queen-of-hearts.css"
];
window.onload = function() {
const switcherBtn = document.getElementById("themes");
let currentIndex = 0;
switcherBtn.addEventListener("click", function() {
const styleLink = document.getElementById("ss");
styleLink.href = stylesUrls[currentIndex];
// 循环切换索引：0 → 1 → 0 → 1...
currentIndex = (currentIndex + 1) % stylesUrls.length;
});
};⚠️ 注意事项：路径必须为相对或绝对 Web 路径（如 claires.css），而非本地文件系统路径（如 C:\Users\...）。浏览器禁止前端 JS 直接读取本地磁盘路径，否则会触发 CORS 或 Not allowed to load local resource 错误。确保两个 CSS 文件已部署在同一服务器上下文（如通过本地服务器 http://localhost:3000/ 访问），而非直接双击打开 file:// 协议页面。
✅ 方案二：进阶推荐——CSS 类驱动主题（更专业、更可扩展）
该方式将所有样式预加载，仅通过切换 元素的 class 控制生效规则，优势明显：
- ✅ 零网络请求延迟（无需重新加载 CSS 文件）
- ✅ 支持任意数量主题（不止两个）
- ✅ 易于添加过渡动画、持久化用户偏好（配合 localStorage）
- ✅ 符合现代 CSS 架构思想（BEM / CSS-in-JS 理念延伸）
HTML 结构：
<!DOCTYPE html> <html class="claire"> <!-- 初始主题 --> <head> <link rel="stylesheet" href="claires.css"> <link rel="stylesheet" href="queen-of-hearts.css"> </head> <body> <button id="themes">Switch Theme</button> </body>
CSS 示例（claires.css）：
html.claire h1 { color: blue; font-size: 30px; }
html.claire div { background-color: green; }CSS 示例（queen-of-hearts.css）：
html.queen h1 { color: red; font-size: 20px; }
html.queen div { background-color: pink; }JavaScript 切换逻辑：
document.getElementById("themes").addEventListener("click", function() {
const html = document.documentElement;
if (html.classList.contains("claire")) {
html.classList.replace("claire", "queen");
} else {
html.classList.replace("queen", "claire");
}
});? 进阶提示：可结合 localStorage 记住用户选择：
// 加载时应用上次选择 const savedTheme = localStorage.getItem("theme") || "claire"; document.documentElement.className = savedTheme; // 切换时保存 html.classList.replace(oldTheme, newTheme); localStorage.setItem("theme", newTheme);
两种方案均能彻底解决“点击后样式消失”的问题。对于学习阶段，建议先掌握方案一；构建真实项目时，强烈推荐方案二——它更高效、更健壮、也更贴近工程实践标准。
