CSS动态加载技巧：JS实时插入样式表方法

本文深入解析了CSS动态加载的核心技巧与实战陷阱，强调必须通过JavaScript用document.createElement('link')创建并正确挂载样式表才能真正触发浏览器的网络请求与完整CSS解析（支持@import、字体、媒体查询等），而直接innerHTML插入或误用document.styleSheets添加规则均会导致失效；同时揭示了加载失败时的静默降级风险、多样式表竞态问题、IE11兼容性坑点及验证样式是否真实生效的调试方法，为前端开发者提供了一套兼顾可靠性、可维护性与真实环境鲁棒性的动态样式加载方案。

动态插入 标签加载外部 CSS

这是最接近“真正加载 CSS 文件”的方式，浏览器会发起网络请求、解析并应用样式，支持 @import、字体、媒体查询等完整功能。

常见错误是直接用 innerHTML 插入 ：它不会触发加载，且可能被浏览器忽略。必须用 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 与动态创建