核心是通过控制 标签的 disabled 属性切换主题css，而非增删节点或修改 href；所有主题css需预置html中并初始禁用，切换时仅修改对应 disabled 值，确保样式彻底退出渲染流程且变量同步生效。
怎么用 JS 动态切换 <link> 加载的主题 CSS
核心就一条：控制 <link rel="stylesheet"> 标签的 disabled 属性，而不是反复增删 DOM 节点。反复创建/移除 <link> 容易触发重复加载、FOUC（闪白）、甚至缓存失效。
实操建议：
- 所有主题 CSS 都提前写在 HTML 里，用
disabled="true"初始禁用，比如：<link id="theme-dark" rel="stylesheet" href="/css/dark.css" disabled><br><link id="theme-light" rel="stylesheet" href="/css/light.css" disabled>
- 切换时只改
disabled值：document.getElementById('theme-dark').disabled = false;<br>document.getElementById('theme-light').disabled = true; - 别用
remove()或appendChild()动态插入新<link>—— 浏览器可能不立即应用，且旧样式表残留内存引用
为什么 disabled 比 href 赋值更可靠
直接改 href 看似简单，但有隐藏陷阱：浏览器对已加载的 <link> 修改 href 不一定会重新拉取资源（尤其同域名下），也可能复用旧缓存、忽略更新后的 CSS 变量或 @import 规则。
而 disabled 是标准 DOM 属性，控制样式表是否参与渲染计算，语义明确、行为可预测、无副作用。
常见错误现象：
- 改了
href却没生效，检查 Network 发现根本没有发新请求 - 主题切换后颜色不对，其实是旧 CSS 里的
:root变量还在作用域里干扰 - 用
fetch()+insertRule()手动注入样式，结果媒体查询、伪类、@keyframes 全部失效
多主题下 :root 变量如何同步更新
光切 CSS 文件不够，如果主题依赖 CSS 自定义属性（如 --bg-color），必须确保变量定义也在对应主题文件中，并且没有跨文件覆盖冲突。
使用场景注意点：
- 每个主题 CSS 文件里，
:root块必须完整声明该主题所需全部变量，不要靠「基础变量 + 主题 patch」方式拼凑 - 避免在 JS 里用
document.documentElement.style.setProperty()覆盖变量 —— 这会污染全局，且无法被 CSS 文件中的@media (prefers-color-scheme)正确接管 - 如果要用 JS 控制变量（比如夜间模式开关联动），建议只用于临时状态，主题切换仍以完整
<link disabled>切换为准
IE11 兼容和现代浏览器的细微差别
disabled 属性在 IE11+ 和所有现代浏览器都支持，但有个容易被忽略的行为差异：IE11 中设置 disabled = false 后，样式不会立刻生效，要等下一个渲染帧；而 Chrome/Firefox 是同步应用。
实操建议：
- 不用做特殊兼容处理，但别在设完
disabled后立刻读getComputedStyle()—— 可能拿到旧值 - 如果需要确认样式已就绪（比如做动画衔接），监听
load事件不靠谱（它只在首次加载触发），稳妥做法是加个requestAnimationFrame延迟一帧 - 别为了兼容性回退到 class 切换方案（如
body.theme-dark）—— 它无法真正卸载旧样式规则，变量、动画、伪元素都可能残留影响
disabled 是唯一既轻量又符合规范的做法，其他绕路方案最后都会撞上变量作用域、媒体查询响应、或者 SSR 与客户端不一致的问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
