动态创建<link>标签是按需加载外部CSS的首选方式，需设rel="stylesheet"、用new URL()处理路径、防重复插入并注意缓存；fetch+<style>适合运行时生成样式但无预加载；insertRule仅用于同源细粒度微调。
动态创建 <link> 标签插入样式表
这是最直接、语义最清晰的方式，适用于按需加载外部 CSS 文件（如主题切换、模块化样式）。浏览器会自动发起请求并解析规则，且支持 onload 和 onerror 回调。
- 必须设置
rel="stylesheet"，否则不会被当作样式加载 -
href必须是绝对路径或相对于当前页面的合法 URL；相对路径在单页应用中容易出错，建议用new URL(..., document.baseURI)构造 - 重复插入相同
href的<link>不会重复请求，但会多一个 DOM 节点——需自行去重或检查document.querySelector('link[href="..."]') - 注意缓存：服务端需正确设置
Cache-Control，否则更新 CSS 后可能仍加载旧版本；开发时可加时间戳参数，如href="theme-dark.css?v=" + Date.now()
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = new URL('./dark-mode.css', import.meta.url).href;
link.onload = () => console.log('dark mode loaded');
link.onerror = () => console.error('failed to load dark mode');
document.head.append(link);
用 fetch + <style> 注入内联 CSS 字符串
适合运行时生成或从 API 获取的样式内容（如用户自定义 UI 配置、CSS-in-JS 库底层），避免额外 HTTP 请求，但无法利用浏览器对 CSS 文件的预加载和缓存机制。
- 获取响应后必须用
response.text()，不能用json()或直接当字符串用 - 注入前建议清理特殊字符（如
</style>出现在 CSS 内容中会导致标签提前闭合），可用正则替换：cssText.replace(//g, '<\/style>') - 若样式含
@import，浏览器仍会发起请求，但无<link>方式可控（比如无法监听@import加载失败） - 多次注入同名 CSS 变量或选择器会按顺序层叠，不自动去重
fetch('./dynamic-theme.css')
.then(r => r.text())
.then(cssText => {
const style = document.createElement('style');
style.textContent = cssText;
document.head.append(style);
});
document.styleSheets 动态操作规则（insertRule / deleteRule）
适用于细粒度控制——比如切换按钮 hover 色、实时调整动画关键帧、A/B 测试变体。它修改的是已存在的样式表对象，不涉及网络请求，性能高，但只对同源 CSS 有效（跨域 <link> 的 cssRules 为空）。
- 必须先有可写样式表：可通过
document.styleSheets[0]（通常是第一个<style>或内联样式）、或先插入空<style>再取.sheet -
insertRule(rule, index)的index超出范围会抛错，建议用sheet.cssRules.length作为末尾索引 - 修改规则后，浏览器立即重绘，无需手动触发；但修改
@keyframes时，已运行的动画不会重新绑定，需重新设置animation属性 - IE11 不支持
insertRule的第二个参数（即不支持指定位置），只能追加到末尾
const sheet = document.styleSheets[0];
try {
sheet.insertRule('.btn { background: #007bff; }', sheet.cssRules.length);
} catch (e) {
console.warn('Failed to insert rule:', e);
}
常见陷阱与兼容性注意点
三种方式混合使用时容易混淆来源和生命周期。真正难处理的不是“怎么加”，而是“什么时候删”和“怎么确保唯一性”。
立即学习“前端免费学习笔记（深入）”；
- SPA 中路由切换后未清理动态样式，会导致内存泄漏和样式污染（比如多个
.theme-dark同时生效） - 服务端渲染（SSR）场景下，
document不存在，所有动态样式逻辑必须包裹在if (typeof document !== 'undefined')中 - Safari 对刚插入的
<link>立即读取sheet.cssRules返回空，需监听load事件后再操作 - CSSOM 操作（如
insertRule）在 Web Worker 中不可用，也不能用于影子 DOM 外部样式注入
实际项目里，优先选 <link> 加载外部文件；仅当需要运行时拼接、无网络依赖或规避缓存时，才用 fetch + <style>；而 insertRule 仅用于高频、小范围、确定同源的样式微调——别试图用它管理整套主题。
