最轻量兼容的方式是直接修改元素的href属性，需加唯一id标识、检查元素存在、使用根相对或绝对路径；document.stylesheets无法加载新资源且受跨域限制。
如何用 JavaScript 动态切换 <link rel="stylesheet"> 的 href
直接改 href 是最轻量、兼容性最好的方式，不需要重载页面或操作 DOM 样式表对象。核心就是找到那个 <link> 元素，然后赋新值。
常见错误是选错元素：比如多个 <link> 时没加 id 或 data-* 标识，结果改了预加载的 CSS 或第三方库的样式表，界面突然错乱。
- 务必给目标
<link>加唯一标识，推荐用id="theme-css" - 修改前检查元素是否存在：
if (!themeLink) return;，避免Cannot set property 'href' of null - 路径必须是完整可解析的 URL，相对路径容易在 SPA 路由下失效，建议统一用根相对路径（
/css/dark.css）或绝对路径
为什么不能只靠 document.styleSheets 切换主题
因为 document.styleSheets 暴露的是已加载的样式表对象集合，但禁用/启用某张表（disabled 属性）只影响渲染，不触发浏览器重新请求资源，也无法切换到未预加载的 CSS 文件。
更关键的是：跨域 <link>（比如 CDN 上的主题 CSS）在 document.styleSheets 中不可写、甚至不可读（SecurityError），强行访问会报错。
立即学习“前端免费学习笔记（深入）”；
-
document.styleSheets[i].disabled = true只对同域、已加载且未被 CORS 阻止的样式表有效 - 它不能加载新文件，也不能清理旧文件缓存，后续切回时可能用到过期内容
- 移动端 WebView 对
disabled支持不稳定，iOS Safari 偶现不生效
href 切换后样式没立刻更新？检查这三件事
浏览器其实会自动加载新 CSS 并应用，但视觉延迟或失效通常不是机制问题，而是路径、缓存或竞态导致的。
- 确认新
href返回的是 200 状态且 MIME 类型为text/css；404 或返回 HTML 会导致静默失败 - 开发时禁用缓存（DevTools → Network → Disable cache），否则可能拿到旧版本 CSS；生产环境可通过添加查询参数（
?v=2.1）破缓存 - 如果在
DOMContentLoaded之前就切换，<link>可能还没被 parser 解析出来，建议等document.readyState === 'interactive'或用defer脚本
暗色模式下切换主题，要不要预加载备用 CSS 文件
要，但只预加载 rel="preload"，别提前 rel="stylesheet"。否则两个主题 CSS 同时生效，规则冲突，样式不可控。
预加载能提前拉取资源，切换时几乎无感知；而直接改 href 触发的是“先卸载旧样式、再加载新样式”的原子过程，中间有短暂空白（尤其网络慢时）。
- 在
里加：<link rel="preload" as="style" href="/css/dark.css"> - 确保预加载的
href和实际切换时用的一致，否则白忙一场 - 不要用
rel="prefetch"，它优先级太低，可能被浏览器忽略
真正麻烦的是 CSS 变量和 JS 主题状态同步——href 切了，但 JS 里还记着旧主题，或者媒体查询没兜底，这些得另外处理。
