直接修改 <link rel="stylesheet"> 的 href 属性即可生效，浏览器会自动加载并应用新样式；需防缓存（加时间戳参数）、确保路径有效、避免跨域问题，并优先用 disabled 切换而非增删 DOM。
怎么用 JavaScript 替换 <link rel="stylesheet"> 的 href
直接改 href 属性是最轻量、兼容性最好的方式，不需要删 DOM、不触发重排。关键不是“换”，而是“换完立刻生效”——浏览器会自动加载新 CSS 并应用，前提是新地址能返回有效样式表。
常见错误现象：href 改了但样式没变，大概率是缓存导致（尤其本地文件或开发服务器没禁缓存），或者新路径 404 但控制台静默失败。
- 用
document.querySelector('link[rel="stylesheet"][href]')定位目标<link>，避免靠顺序索引（比如document.styleSheets[0]不可靠） - 替换前建议加版本参数防缓存：
link.href = 'theme-dark.css?v=' + Date.now() - 如果多个样式表共存，确保只动你负责的那个——检查
id或自定义data-*属性更稳妥
切换时样式闪动或布局抖动怎么办
闪动本质是旧样式卸载和新样式加载之间的空窗期。浏览器不会等新 CSS 下载完再删旧的，而是“先切 href，再异步加载”，所以中间可能白屏或回退到 UA 默认样式。
使用场景：暗色模式切换、主题预设、A/B 测试样式分发。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 提前预加载新样式：
<link rel="preload" as="style" href="theme-dark.css">，但注意 preload 不会自动插入 DOM，只是提前拉取 - 更稳的做法：保持旧
<link>不删，新增一个<link rel="stylesheet">，等load事件后再禁用旧的（设disabled=true），避免空窗 - 别用
@import做动态切换——它无法用 JS 控制加载时机，且阻塞渲染
disabled 属性比删 DOM 更安全
有人习惯 parentNode.removeChild(link) 再 appendChild(newLink)，这会触发 DOM 重排，还可能丢失原有 <link> 上的其他属性（如 media、title）。
性能影响：切换 disabled 是纯样式层操作，不涉及 DOM 树变更，开销几乎为零；而增删节点在频繁切换时（比如滚动监听触发）可能卡顿。
- 启用：
link.disabled = false - 禁用：
link.disabled = true - 注意：只有
rel="stylesheet"的<link>才支持disabled，rel="preload"或rel="icon"不行 - 兼容性没问题，IE9+ 都支持
遇到 CORS 或跨域样式表加载失败
如果你的 CSS 文件在另一个域名下（比如 CDN），而 HTML 页面没配好 CORS 头，link.href 能改成功，但浏览器会拒绝应用样式，控制台报 Cross-Origin Stylesheet 错误，且不抛 JS 异常。
错误现象：页面没变化，开发者工具 Network 里看到 CSS 请求状态是 “(blocked)” 或 “CORS error”，Elements 面板里该 <link> 的样式规则为空。
- 服务端必须返回
Access-Control-Allow-Origin: *（或指定域名） - 不能靠
crossorigin属性解决——<link>不支持该属性（只有<script>和<img>支持） - 本地开发时用
file://协议必然失败，必须走http://或https://
真正麻烦的是那些被忽略的细节：比如改了 href 却忘了同步更新 media 属性，或者用了相对路径但在 SPA 路由下解析错位——这些不会报错，但样式就是不生效。
