直接修改link的href属性可切换主题，但易因路径错误、缓存未更新或dom操作不当导致白屏、样式不生效或二次点击崩溃；推荐预置多link并用disabled控制开关，兼顾稳定性与性能。
直接改 <link> 的 href 属性就能切换，但多数人第一次做会白屏、样式不生效、点第二次就崩——问题不在逻辑，而在路径、缓存和 DOM 控制方式。
为什么改了 href 但样式没变
浏览器确实会加载新 CSS，但常见失效原因很具体：
-
href指向的是本地文件路径（如c:\styles\dark.css），浏览器静默拒绝，控制台只报Not allowed to load local resource - 开发时双击打开 HTML（
file://协议），跨域限制导致请求被 Network 面板标为(blocked) - 新 CSS 文件返回 404，但 JS 不抛错，浏览器默默跳过；务必检查 Network 中该请求的状态码是否为 200
- 没加防缓存参数，尤其在
http://localhost:5500这类本地服务器上，浏览器复用旧缓存
解决办法：确保用相对路径（如 "css/dark.css"），通过本地服务器访问，并在赋值时加时间戳：link.href = "dark.css?v=" + Date.now()。
为什么禁用 disabled 比删 DOM 更稳
用 link.disabled = true/false 切换，是真正兼容、零重排、无 FOUC 的做法：
-
disabled是 DOM 属性，不是 HTML 属性，必须用 JS 设置（link.setAttribute("disabled", "")无效） - 它保留原始
<link>上所有属性（media、crossorigin、id），不会丢失上下文 - 多个主题
<link rel="stylesheet">可全部预加载，切换只是开关，毫秒级生效 - IE9+ 全支持，而删 DOM 再 append 在频繁触发场景（如滚动监听）下可能卡顿
注意：只有 rel="stylesheet" 的 <link> 才支持 disabled；rel="preload" 或 rel="icon" 设了也无效。
怎么避免点击两次后样式失效
别用 stylesurls.shift() 或 pop() 循环切换主题——数组第二次调用就空了，link.href = undefined 直接崩：
- 正确做法是用索引变量：
let currentIndex = 0，每次点击执行currentIndex = (currentIndex + 1) % stylesurls.length - 数组内容必须是完整可访问的 URL（如
"light.css"或"https://cdn.example.com/dark.css"），不能是拼错的相对路径 - 如果主题多于两个（比如加了
blue.css和high-contrast.css），索引方案依然稳定；shift()类写法极易逻辑错乱
更推荐 HTML 中预先声明所有主题 link 并带 id，JS 只操作 disabled，彻底规避路径与状态管理风险。
为什么不要依赖 title 属性做切换
title 属性本身不控制样式启用/禁用，它只是个标识符：
- 即使写了
<link rel="stylesheet" title="dark" href="dark.css">，只要没设disabled = false，它就只是个普通资源，不会渲染 - 浏览器菜单里的“页面样式”列表靠的是
rel="alternate stylesheet"，不是日常主题切换该走的路 - 用
document.querySelector('link[title="dark"]')定位不如用document.getElementById("theme-dark")稳定，也避免和备用样式表语义混淆
真正让某套样式“上场”的，永远是 disabled 布尔值。路径、缓存、DOM 控制这三处任何一个出错，都会导致白屏或回退到 UA 默认样式——它们比逻辑本身更常成为故障源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
