title属性仅作标识，disabled布尔属性才控制样式启用/禁用；启用主题需将目标link的disabled设为false，其余设为true，且rel必须严格为"stylesheet"。
title 属性本身不触发样式切换，它只是个标识符；真正控制启用/禁用样式的，是 disabled 布尔属性。
为什么改 title 不会让样式生效
浏览器只把 rel="stylesheet" 的 <link> 当作有效样式表；而带 title 但没设 rel="alternate stylesheet" 的标签，title 仅用于 JS 查询或浏览器菜单识别，不会参与渲染。即使写了 <link rel="stylesheet" title="dark" href="dark.css">，只要 disabled 为 true（或未显式设为 false），它就完全不生效。
常见错误现象：
- 页面没变化，控制台也无报错，样式“静默失效”
- 用
document.querySelector('link[title="dark"]')能取到元素，但getComputedStyle查不到对应规则 - 误以为
title是开关，反复修改它却毫无反应
disabled=true 才是主题切换的核心操作
启用某套样式，本质是把目标 <link> 的 disabled 设为 false；禁用其他所有 rel="stylesheet" 的 <link>，设为 true。这个操作轻量、无重排、兼容 IE9+，且保留 media、crossorigin 等原始属性。
必须满足的条件：
- 目标
<link>的rel必须是"stylesheet"（拼写、大小写、引号全要严格匹配） - 不能对
rel="preload"或rel="icon"等其他类型使用disabled，无效 - 一次只能有一个
rel="stylesheet"处于disabled=false状态，否则样式会叠加冲突
推荐写法：用 id 定位 + disabled 控制
比起靠 title 查询，id 更快、更稳，也避免和备用样式表语义混淆。HTML 中明确声明：
<link id="theme-light" rel="stylesheet" href="light.css"><link id="theme-dark" rel="stylesheet" href="dark.css" disabled><link id="theme-blue" rel="stylesheet" href="blue.css" disabled>
JS 切换逻辑简洁可靠：
function switchTheme(themeId) {
document.querySelectorAll('link[rel="stylesheet"]').forEach(l => l.disabled = true);
const target = document.getElementById(themeId);
if (target) target.disabled = false;
}
调用 switchTheme('theme-dark') 即可。优势明显：
- 不改
href，路径固定，杜绝 404 和缓存错乱 - 所有 CSS 在页面加载时已预下载，切换瞬间完成，无白屏或闪动
- 与
localStorage同步时只需存themeId字符串，结构清晰
最容易被忽略的点：预加载资源和用户偏好同步必须在 DOM ready 后立即执行，且要处理服务端渲染（SSR）场景下首次 hydration 时的 disabled 状态一致性——否则首屏可能短暂显示错误主题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
