必须设 rel="stylesheet"，否则浏览器不加载CSS；需同时设置href指向有效路径，并插入document.head中防FOUC；推荐添加onload/onerror监听，IE需轮询sheet.cssRules判断加载。
用 document.createElement('link') 创建 link 标签必须设 rel="stylesheet"
不设 rel 或设错（比如 rel="style"、rel="css"），浏览器根本不会加载 CSS。这是最常被忽略的硬性要求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
link元素必须同时设置rel="stylesheet"和href（指向有效 CSS 路径） - 推荐在
head中插入，避免 FOUC（Flash of Unstyled Content）；若插到body后，部分浏览器可能延迟应用样式 - 可加
type="text/css"，但现代浏览器已非必需；若目标环境含老旧 IE（如 IE8），建议保留 - 插入前建议检查
href是否 404：可用fetch(href, { method: 'HEAD' }).catch(...)预检（注意跨域限制）
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/assets/theme-dark.css';
link.type = 'text/css';
document.head.appendChild(link);
动态插入 <style> 标签时，内容必须写入 textContent 而非 innerHTML
用 innerHTML 写 CSS 规则会导致转义问题（如 {、} 被 HTML 解析器处理），且部分浏览器会忽略非法 HTML 内容后整段丢弃样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终用
style.textContent = 'body { margin: 0; }'，不要用style.innerHTML - 若 CSS 字符串来自用户输入或模板，需手动转义单双引号和反斜杠（
\、"、'），否则 JS 字符串解析会报错 - 大量规则建议拆成多条
style标签，而非拼长字符串——便于后续remove()管理
const style = document.createElement('style');
style.textContent = `
.highlight { background: #ffeb3b; }
@media (prefers-color-scheme: dark) {
body { background: #121212; }
}
`;
document.head.appendChild(style);
动态加载失败时，link 元素有 onload 和 onerror 事件，但无 Promise 化原生支持
浏览器不提供 link.onload 的 Promise 封装，直接监听事件是唯一可靠方式；Promise 化需手动包装，且要注意 onerror 不触发 CORS 错误（会被静默丢弃）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式绑定
link.onload和link.onerror，不能只靠then/catch假设存在 - CORS 场景下，跨域 CSS 加载失败不会触发
onerror，仅控制台报错；此时需配合fetch()预检或服务端代理 - 避免重复插入同个
href的link：插入前先查document.querySelector(`link[href="${href}"]`)
IE11 及更早版本不支持 link.onload，需用轮询 sheet.cssRules 判断加载完成
IE 中 link 没有 onload，只能通过定时检查 link.sheet?.cssRules 是否存在且长度 > 0 来判断是否就绪，但该属性受 CORS 限制，跨域时为 null。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 兼容 IE 时，对同域 CSS 用
setInterval检查link.sheet && link.sheet.cssRules?.length - 超时时间建议设 5–10s，避免无限等待；超时后应清理定时器并触发 fallback 行为
- 若项目已放弃 IE 支持，可忽略此节——现代浏览器（Chrome/Firefox/Safari/Edge ≥79）全部支持
link.onload
真正麻烦的不是语法，而是加载时机与错误边界的处理。很多人卡在“样式没生效”，结果发现只是 rel 拼错了，或者 href 是相对路径却跑在 file:// 协议下。
