可通过 JavaScript 动态创建 <link> 标签并插入 <head> 实现 CSS 延迟加载，适用于按设备类型、用户偏好或异步数据动态选择样式；核心是 document.createElement('link') 设置 rel="stylesheet" 和 href 后追加至 document.head，支持 onload/onerror 监听，需注意重复插入、样式替换及缓存问题。
可以通过 JavaScript 动态创建 <link> 标签并插入到 <head> 中，实现 CSS 在 JS 执行完成后再加载。这种方式适用于需要根据 JS 运行结果（如设备类型、用户偏好、异步数据）来决定加载哪套样式的情况。
动态创建 link 标签引入 CSS
核心思路是用 JS 创建 link 元素，设置其 rel="stylesheet" 和 href，然后追加到 document.head。
- 确保 JS 执行完逻辑（比如判断环境、获取配置）后再创建 link
- 推荐使用
document.createElement('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）
