rel="stylesheet"的disabled属性必须用JavaScript设置，不能写在HTML中；写成<link rel="stylesheet" disabled>无效，只有linkEl.disabled = true/false才能同步启用或停用样式表且保留CSSOM。
rel="stylesheet" 的 disabled 属性只能用 JS 设置，不能写在 HTML 里
浏览器只认 rel="stylesheet" 这个字符串作为样式表启用开关，但它本身不支持 HTML 属性形式的 disabled。你写 <link rel="stylesheet" href="a.css" disabled> 是无效的——该属性会被忽略，样式照常加载。
真正起作用的是 DOM 属性 disabled，必须用 JavaScript 显式赋值：
-
linkEl.disabled = true→ 立即停用该样式表，不参与层叠计算 -
linkEl.disabled = false→ 恢复启用，样式重新生效（无需 reload） - 这个操作是同步的，且保留已加载的 CSSOM，切换比移除/重插快得多
为什么不能用 remove() 或 innerHTML 替代 disabled
常见错误是用 link.remove() 或清空 <head> 再重写 <link> 标签。这会导致：
- FOUC（无样式闪屏）：浏览器需重新发起网络请求、解析、构建 CSSOM
- 重复加载：即使缓存命中，仍触发一次新请求（
Cache-Control: max-age不保命） - 样式丢失风险：若 href 路径相对、或涉及 @import 嵌套，重插后可能解析失败
-
disabled是唯一能“冻结+唤醒”同一 CSSOM 的标准方式
多个 <link rel="stylesheet"> 如何安全切换
主题切换场景下，通常有多个 <link> 并存（比如 light.css / dark.css），需确保仅一个启用：
立即学习“前端免费学习笔记（深入）”；
- 先遍历所有
document.querySelectorAll('link[rel="stylesheet"]') - 对每个匹配项设置
el.disabled = el.href !== targetHref - 别漏掉
disabled为false的那个——它必须显式设为false，否则可能残留旧状态 - 注意：只有
rel="stylesheet"的 link 才响应disabled；rel="preload"或rel="icon"设了也无效
disabled 切换后 computed style 不更新？检查这些点
有时设了 link.disabled = false，但页面没变化，不是 JS 失效，而是：
- 该
<link>标签不在<head>内，而是在<body>或 script 后动态插入 → 浏览器可能已跳过解析 - href 路径 404 或返回非 CSS 内容（如 HTML 错误页）→ Network 面板能看到请求，但 Styles 面板为空
- 样式被更高优先级规则覆盖，比如内联
style或 !important 规则 → 检查 Elements 面板的 Computed 标签页 - 用了
@import在 CSS 文件里引入其他样式 →disabled只控制当前 link，不递归禁用 import 链
最易被忽略的是：disabled 是 DOM 属性，不是 HTML 属性；写成 link.setAttribute('disabled', '') 无效，必须用点号赋值。
