直接改link的href会触发css重载但易导致fouc；推荐用两个预置link标签通过disabled属性原子切换，避免白屏闪动，并结合localstorage与prefers-color-scheme优先级控制确保用户选择不被覆盖。
直接改 link 标签的 href 会触发样式重载，但有风险
浏览器确实会重新加载并应用新 CSS，但这个过程不是原子性的：旧样式可能残留、新样式加载期间页面会闪动、甚至出现部分规则未生效的情况。尤其当两个 CSS 文件里有同名选择器或 @import 依赖时，行为更难预测。
实操建议：
- 确保目标
link元素有明确id（比如<link id="theme-css" rel="stylesheet" href="light.css">），避免误操作其他样式表 - 切换前先检查新 URL 是否合法：
if (newHref && newHref.trim()) { ... } - 不要在
DOMContentLoaded之前就去改href，否则 DOM 可能还没就绪 - 改完后可选加个简单校验：
document.getElementById('theme-css').href === newHref，但别依赖它判断样式是否“已生效”
link 的 disabled 属性比直接改 href 更可控
如果你只是想切换明暗主题这类互斥样式集，推荐用多 link + disabled 控制，而不是反复覆盖同一个 href。这样能避免加载竞争和中间态问题。
示例结构：
<link id="light-theme" rel="stylesheet" href="light.css"><link id="dark-theme" rel="stylesheet" href="dark.css" disabled>
切换逻辑：
function switchTheme(isDark) {
document.getElementById('light-theme').disabled = isDark;
document.getElementById('dark-theme').disabled = !isDark;
}
注意点：
-
disabled是原生属性，设为true后对应样式立即失效，无加载延迟 - 两个
link必须都存在且rel="stylesheet"，否则disabled不起作用 - 不能用
style.display = 'none'替代 —— 它对link无效
动态加载 CSS 时要注意 onload 和错误处理
如果新 CSS 文件路径是拼接出来的（比如带时间戳防缓存），或者需要等用户操作后再加载，就得手动创建 link 并监听加载状态。
关键代码片段：
function loadCSS(url) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.onload = () => console.log('CSS loaded');
link.onerror = () => console.error('Failed to load CSS:', url);
document.head.appendChild(link);
}
容易踩的坑：
- 没加
link.onerror—— 404 或跨域失败时静默失败，调试困难 - 重复调用导致多个
link累积，应先remove()旧的再 append 新的 - IE11 不支持
link.onload，得降级用link.onreadystatechange判断readyState === 'loaded'
服务端渲染或 SSR 场景下，href 切换要配合 HTML 预置
如果页面首屏由服务端输出，而你想在 JS 中“还原”服务端决定的主题，就不能只改 href —— 因为初始 HTML 里已经写死了 link 的 href 值，JS 修改只是客户端补救。
正确做法：
- 服务端根据请求头（如
prefers-color-scheme）或用户登录态，直接输出对应href的link - JS 初始化时读取
document.documentElement.dataset.theme或 cookie，仅用于后续交互切换，不负责首屏 - 避免 JS 加载完才去改
href，造成 FOUC（Flash of Unstyled Content）
复杂点往往不在 JS 怎么写，而在要不要让 JS 承担这个责任 —— 很多时候，把决策提前到 HTML 构建阶段更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
