真正稳定的做法是预置多个link标签并控制disabled属性切换，因其是浏览器原生支持的原子级样式开关；直接改href会导致FOUC、缓存错乱及@import失效。
直接改 link 的 href 最简单，但容易闪屏、失效或缓存错乱；真正稳定的做法是预置多个 link 标签，只控制 disabled 属性切换——它才是浏览器原生支持的“原子级样式开关”。
为什么不能只靠修改 href 切换皮肤
看似一行代码就能换：document.getElementById('theme-css').href = 'dark.css'，但实际会出三类问题：
- FOUC（Flash of Unstyled Content）：旧样式未退场、新样式未就绪，页面短暂白屏或错乱
- 缓存陷阱：同域名下改
href，浏览器可能复用旧 CSS 文件，尤其当文件名没变（如没加时间戳）时 - @import 或 CSS 变量不生效：已加载的样式表不会重新解析依赖链，
dark.css里的@import 'vars.css'可能被跳过
用 disabled 切换多主题（推荐明暗/租户等互斥场景）
前提是所有皮肤 CSS 都提前写在 HTML 中，初始禁用：
<link id="theme-light" rel="stylesheet" href="/css/light.css" disabled> <link id="theme-dark" rel="stylesheet" href="/css/dark.css" disabled> <link id="theme-blue" rel="stylesheet" href="/css/blue.css" disabled>
切换时只改 disabled 值，其他什么都不动：
立即学习“前端免费学习笔记（深入）”；
-
document.getElementById('theme-light').disabled = false→ 启用 light -
document.getElementById('theme-dark').disabled = true→ 禁用 dark -
document.getElementById('theme-blue').disabled = true→ 禁用 blue
注意：disabled 是布尔属性，设为 true 或 false 即可，不要用字符串 "true"；且必须确保每个 link 都有 rel="stylesheet"，否则 disabled 不起作用。
动态创建 link 加载租户专属皮肤（适合按 tenantId 加载）
当皮肤数量不确定、或每个租户 CSS 完全独立（不能预置全部），就得动态创建：
- 拼 URL 时带上租户标识：
const url = `/css/tenant-${tenantId}.css` - 必须设置
rel="stylesheet"和type="text/css"，IE11 才认 - 插入前检查是否已存在，避免重复加载：
if (!document.querySelector(`link[href="${url}"]`)) { ... } - 加
onload和onerror处理加载失败，比如 fallback 到默认皮肤
示例关键片段：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
link.onload = () => console.log('skin loaded');
link.onerror = () => loadFallbackSkin();
document.head.appendChild(link);
容易被忽略的细节：时机、存储与降级
皮肤切换不是改完 DOM 就完事了：
- 执行时机：必须在
DOMContentLoaded后操作link，否则元素可能还没挂载 - 持久化选择：用
localStorage保存上次选中的皮肤 ID，但别在脚本开头就读——要等 DOM 就绪后再读再应用 - 降级兜底：如果租户 CSS 加载失败，应立即启用备用皮肤（比如 light），而不是留空样式
- 变量同步：CSS 自定义属性（
--primary-color）在disabled切换后会自动更新，但若用 JS 读取这些变量，需等样式计算完成（可监听requestAnimationFrame）
