用 disabled 属性切换 样式表最可靠，需手动控制互斥状态；ie11 以下需降级为 remove/appendchild；操作 document.stylesheets 易因跨域或权限报错，推荐用 setproperty() 修改 css 变量。
怎么用 JavaScript 切换已加载的 <link> 样式表
核心是控制 <link rel="stylesheet"> 元素的 disabled 属性，而不是删掉或重载样式表。浏览器会立即应用变更，且不触发重排（仅重绘）。
常见错误：用 remove() 或 innerHTML = "" 清空 <style></style>，导致样式闪退、CSSOM 重建、动画中断；或者用 document.write() 重写 <link>，引发整页重载。
- 确保每个待切换的
<link>有唯一id，比如id="theme-dark"和id="theme-light" - 切换时只改
disabled：document.getElementById('theme-dark').disabled = false - 同一时间最多一个启用——必须手动设其他为
true，disabled不是互斥属性，不会自动同步 - 注意：IE11 及更早版本中，
disabled对<link>无效，需降级用remove()+appendChild()替代
为什么直接操作 document.styleSheets 很容易出错
document.styleSheets 是只读的 CSSStyleSheetList，其中每个 CSSStyleSheet 对象的 cssRules 在跨域 <link> 或内联 @import 下不可读，会抛 SecurityError。不是所有样式表都能被 JS 安全修改。
典型翻车场景：想动态改某个主题的 :root 变量，结果发现 document.styleSheets[2].cssRules 是 null，或遍历时卡在第 0 条规则就报错。
- 优先查
ownerNode类型：只有ownerNode.nodeType === 1（即<style></style>或同源<link>）才可安全访问cssRules - 修改变量推荐用
document.documentElement.style.setProperty()，它绕过 CSSOM 限制，且兼容性好 - 真要批量改规则？先用
Array.from(document.styleSheets).filter(...)筛出可写的，再逐条处理，别硬遍历
insertRule 和 deleteRule 的实际可用边界
这两个方法只对内联 <style></style> 或同源 <link> 的 CSSStyleSheet 生效，且插入位置索引必须严格在 0 到 cssRules.length 范围内，越界就静默失败（不报错但不生效）。
最常被忽略的是：插入的 CSS 文本必须是完整声明块，不能只写 color: red，得是 .btn { color: red; }；而且选择器不能含伪类/伪元素（如 :hover），否则部分浏览器拒绝解析。
- 插入前建议先
try/catch，捕获DOMException类型错误 - 删除规则用
deleteRule(index)后，后续规则索引会自动前移，循环删除时要用while (sheet.cssRules.length) sheet.deleteRule(0)，别用for正向遍历 - 性能敏感场景慎用：每调一次
insertRule都触发样式计算，100 条规则分批插比一次性插快得多
切换主题时，CSS Custom Properties 比重写样式表更稳
直接改 :root 里的变量值，比切换整张 <link> 更轻量、更可控。所有现代浏览器都支持 document.documentElement.style.setProperty()，且变更实时生效，无 FOUC（Flash of Unstyled Content）。
坑点在于：变量名带连字符（如 --main-bg）必须用驼峰转义（mainBg）传给 setProperty，而 CSS 内部仍用短横线写法；另外，如果原 CSS 中变量用了 !important，JS 设置会被忽略。
- 批量设置用
Object.entries(themeVars).forEach(([k, v]) => root.style.setProperty(k, v)) - 避免覆盖用户自定义样式：先用
getComputedStyle(root).getPropertyValue('--main-bg')读当前值，再决定是否覆盖 - 深色模式检测可结合
window.matchMedia('(prefers-color-scheme: dark)')，但不要依赖它自动切换——用户明确点了“切浅色”，就得以用户操作为准
真正难的不是切换动作本身，而是确保所有组件都用变量承接样式、没有硬编码颜色或尺寸。漏掉一个 #333，整个主题就破功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
