17370845950

可通过 JavaScript 动态创建 标签并插入 实现 CSS 延迟加载，适用于按设备类型、用户偏好或异步数据动态选择样式；核心是 document.createElement('link') 设置 rel="stylesheet" 和 href 后追加至 document.head，支持 onload/onerror 监听，需注意重复插入、样式替换及缓存问题。

可以通过 JavaScript 动态创建 标签并插入到 中，实现 CSS 在 JS 执行完成后再加载。这种方式适用于需要根据 JS 运行结果（如设备类型、用户偏好、异步数据）来决定加载哪套样式的情况。

动态创建 link 标签引入 CSS

核心思路是用 JS 创建 link 元素，设置其 rel="stylesheet" 和 href，然后追加到 document.head。

• 确保 JS 执行完逻辑（比如判断环境、获取配置）后再创建 link
• 推荐使用 document.cre

  

  ateElement('link')，避免 innerHTML 方式带来的解析风险
• 可监听 link.onload 或 link.onerror 处理加载状态（注意兼容性，部分老浏览器不支持 onload）

基础示例代码

以下是最简可用写法：

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/path/to/your/style.css';

// 可选：添加加载完成回调
link.onload = () => {
  console.log('CSS 加载成功');
};
link.onerror = () => {
  console.error('CSS 加载失败');
};

document.head.appendChild(link);

加载前需 JS 判断的常见场景

比如根据屏幕宽度、主题模式或接口返回值加载不同 CSS：

• 检测是否为深色模式：if (window.matchMedia('(prefers-color-scheme: dark)').matches)
• 读取 localStorage 中保存的主题：localStorage.getItem('theme') === 'dark'
• 等待某个异步配置加载完毕（如从 API 获取皮肤 ID）后拼接 CSS 路径

注意事项

动态插入的 CSS 是异步加载的，不会阻塞 JS 执行，但会影响后续渲染。要注意：

• 不要在 document.write 已结束后再多次插入同名 CSS，可能重复生效
• 若需替换已有样式，建议先移除旧 link（通过 id 或 class 标识），再插入新 link
• 移动端注意缓存行为，可在 href 后加时间戳或版本号避免旧样式残留（如 style.css?v=1.2.0）