动态插入标签是真正加载CSS的正确方式，需用createElement创建并设rel="stylesheet"后挂载到head，监听load/error事件；document.styleSheets仅为只读集合，不能用于添加样式。
动态插入 <link> 标签加载外部 CSS
这是最接近“真正加载 CSS 文件”的方式，浏览器会发起网络请求、解析并应用样式，支持 @import、字体、媒体查询等完整功能。
常见错误是直接用 innerHTML 插入 <link>：它不会触发加载，且可能被浏览器忽略。必须用 DOM 方法创建并挂载。
- 用
document.createElement('link')创建节点，设置rel="stylesheet"和href - 务必在插入前设置好
rel，否则 Chrome/Firefox 会跳过加载 - 插入到
document.head，不要插到body或未挂载的 fragment 中 - 需要监听
load和error事件做容错，onload在 Safari 中不可靠，优先用addEventListener
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/styles/theme-dark.css';
link.addEventListener('load', () => console.log('CSS loaded'));
link.addEventListener('error', () => console.error('Failed to load CSS'));
document.head.appendChild(link);
document.styleSheets 与动态创建 <style></style> 的区别
用 document.createElement('style') 写入 CSS 文本，是同步生效、无网络依赖的方案；而 document.styleSheets 是只读的样式表集合，不能用来“添加”新表——它只是已有样式（含动态插入的）的反射列表。
容易踩的坑：有人试图用 document.styleSheets[0].insertRule() 来“加载”整套样式，这只能逐条插入规则，无法处理 @keyframes、@font-face 或嵌套结构，维护成本高且易出错。
立即学习“Java免费学习笔记（深入）”；
- 适合小范围覆盖：比如主题色切换、组件局部样式注入
- 注意 CSS 优先级：动态
<style></style>默认插入到head末尾，通常比外部 CSS 优先级高 - IE11 不支持
insertRule对@media块内规则的操作，需降级为整体替换textContent
const style = document.createElement('style');
style.textContent = `.btn { background: #007bff; }`;
document.head.appendChild(style);
CSS 加载失败时的静默降级问题
外部 CSS 动态加载失败时，默认没有任何提示，页面可能渲染异常却无报错——尤其在弱网或 CSP 严格限制下，link.onerror 可能不触发（如跨域资源被拦截），或只在加载完成阶段才触发。
这不是 JS 错误，而是资源加载层面的静默失败，调试时容易误判为逻辑 bug。
- 服务端返回 404/500 时，
error事件一般会触发；但返回 200 + 空内容或 HTML 页面，则不会触发error - CSP
style-src拦截时，控制台有警告但不抛 JS 异常，也不会触发error事件 - 建议搭配简单校验：加载后检查关键选择器是否生效，例如
getComputedStyle(document.body).backgroundColor是否符合预期
多个动态样式表的加载顺序与竞态
浏览器对同一域名的并发请求数有限制（通常是 6 个），连续插入多个 <link> 会排队，但它们的 load 回调执行顺序不一定和插入顺序一致——尤其是当某一个响应慢、另一个快时，后者可能先回调。
如果你依赖 A.css 定义变量、B.css 使用这些变量，就不能只靠插入顺序保证执行时序。
- 避免隐式依赖：尽量让每个 CSS 文件自包含，不依赖其他动态加载文件中的变量或 class
- 真要串行，可用
Promise链式加载：loadCSS(A).then(() => loadCSS(B)) - 注意
disabled属性：临时设为true可阻止应用，之后再设false启用，但仅适用于已加载完成的 sheet
