css动态加载样式实现方式_JS配合实践_技术教程

动态创建标签是按需加载外部CSS的首选方式，需设rel="stylesheet"、用new URL()处理路径、防重复插入并注意缓存；fetch+适合运行时生成样式但无预加载；insertRule仅用于同源细粒度微调。

动态创建标签插入样式表

这是最直接、语义最清晰的方式，适用于按需加载外部 CSS 文件（如主题切换、模块化样式）。浏览器会自动发起请求并解析规则，且支持 onload 和 onerror 回调。

必须设置 rel="stylesheet"，否则不会被当作样式加载
href 必须是绝对路径或相对于当前页面的合法 URL；相对路径在单页应用中容易出错，建议用 new URL(..., document.baseURI) 构造
重复插入相同 href 的不会重复请求，但会多一个 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` + 注入内联 CSS 字符串

适合运行时生成或从 API 获取的样式内容（如用户自定义 UI 配置、CSS-in-JS 库底层），避免额外 HTTP 请求，但无法利用浏览器对 CSS 文件的预加载和缓存机制。

获取响应后必须用 response.text()，不能用 json() 或直接当字符串用
注入前建议清理特殊字符（如出现在 CSS 内容中会导致标签提前闭合），可用正则替换：cssText.replace(//g, '')
若样式含 @import，浏览器仍会发起请求，但无方式可控（比如无法监听 @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 有效（跨域的 cssRules 为空）。

必须先有可写样式表：可通过 document.styleSheets[0]（通常是第一个或内联样式）、或先插入空再取 .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 对刚插入的立即读取 sheet.cssRules 返回空，需监听 load 事件后再操作
CSSOM 操作（如 insertRule）在 Web Worker 中不可用，也不能用于影子 DOM 外部样式注入