按需加载CSS：JS动态插入link标签

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《按需加载CSS：通过JS动态插入link标签》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

按需加载CSS最常用方式是JavaScript动态创建并插入link标签，设置rel="stylesheet"和href后添加到head；需检查重复加载、监听onload/onerror，并结合点击、路由切换等业务场景触发。

按需加载 CSS 最常用的方式就是通过 JavaScript 动态创建并插入 标签，让浏览器在需要时才下载和应用对应样式表。

动态创建 link 标签并插入 head

核心思路是用 JS 创建一个 元素，设置 href 指向目标 CSS 文件，再将其添加到 中。浏览器会自动发起请求并应用样式。

• 使用 document.createElement('link') 创建元素
• 设置必要属性：rel="stylesheet"、href="path/to/style.css"
• 推荐加上 type="text/css"（虽非必需，但语义清晰）
• 插入到 document.head，确保样式及时生效

示例代码：

function loadCSS(url) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = url;
  document.head.appendChild(link);
}
loadCSS('/css/modal.css');

避免重复加载同一份 CSS

多次调用可能插入多个相同 link，造成冗余请求或样式覆盖问题。可在插入前检查是否已存在对应 href 的 link。

• 遍历 document.querySelectorAll('link[rel="stylesheet"]')
• 比对每个 href 是否与目标 URL 一致（注意处理相对路径、协议、查询参数等）
• 已存在则跳过，否则插入

简化判断可直接用绝对 URL：

function loadCSS(url) {
  const absoluteUrl = new URL(url, location.href).href;
  const exists = [...document.querySelectorAll('link[rel="stylesheet"]')]
    .some(link => new URL(link.href, location.href).href === absoluteUrl);
  if (exists) return;

  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.head.appendChild(link);
}

监听加载完成与错误处理

CSS 加载是异步的，但原生不支持 onload（部分浏览器支持，但兼容性差），更可靠的方式是轮询 document.styleSheets 或用 link.onload/link.onerror（现代浏览器支持良好）。

• 给 link 添加 onload 回调，表示样式已解析并生效
• 添加 onerror 处理 404、跨域等失败情况
• 注意：即使 onload 触发，也不代表所有选择器都已渲染生效，但 DOM 已可安全操作

function loadCSS(url, onSuccess, onError) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;

  link.onload = () => onSuccess && onSuccess();
  link.onerror = () => onError && onError(new Error(`Failed to load CSS: ${url}`));

  document.head.appendChild(link);
}

配合业务场景按需触发

真正“按需”的关键在于加载时机。常见结合点有：

• 用户点击按钮后加载弹窗样式（如 data-css="modal.css"）
• 路由切换时（SPA 中进入某页面前预加载对应 CSS）
• 组件首次挂载时（React/Vue 中在 useEffect 或 mounted 中调用）
• 媒体查询匹配后加载响应式专用样式（如仅在 print 时加载打印样式）

例如点击触发：

document.querySelector('#open-modal-btn').addEventListener('click', () => {
  loadCSS('/css/modal.css', () => {
    document.querySelector('.modal').classList.remove('hidden');
  });
});

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《按需加载CSS：JS动态插入link标签》文章吧，也可关注golang学习网公众号了解相关技术文章。