如何通过javascript动态加载css文件

通过创建link标签并插入head可动态加载CSS，优化首屏加载；2. 设置rel为stylesheet、href为目标路径，并监听onload事件确保加载完成；3. 调用loadCSS函数时检查是否已存在相同href的link，避免重复加载；4. 该方法兼容性好，适用于大多数浏览器。

通过 JavaScript 动态加载 CSS 文件，是一种在页面运行时按需引入样式资源的常用方式。这种方法有助于优化首屏加载速度，减少初始资源体积。

创建 link 标签插入 DOM

最直接的方式是通过操作 DOM，动态创建一个 link 元素，并将其添加到页面的 head 中。

具体步骤如下：

• 创建 link 元素
• 设置 rel 属性为 stylesheet
• 设置 href 属性为目标 CSS 文件路径
• 将 link 插入到 document.head

示例代码：

立即学习“Java免费学习笔记（深入）”；

ListenHub

超真实的AI播客生成器

下载

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

// 调用
loadCSS('/path/to/style.css');

确保加载完成后再执行后续逻辑

有时需要在 CSS 加载完成后执行某些操作（例如显示依赖该样式的元素），可以通过监听 link 的 onload 事件实现。

示例：

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

  if (callback) {
    link.onload = () => callback(null);
    link.onerror = () => callback(new Error(`Failed to load CSS: ${url}`));
  }

  document.head.appendChild(link);
}

loadCSS('/path/to/theme.css', (err) => {
  if (err) {
    console.error(err);
  } else {
    console.log('CSS loaded successfully');
  }
});

避免重复加载

多次调用加载函数可能导致重复插入相同的 CSS 文件。可以通过检查已存在的 link 标签来避免这个问题。

改进后的版本：

function loadCSS(url, callback) {
  // 检查是否已加载
  if (document.querySelector(`link[href="${url}"]`)) {
    if (callback) callback(null);
    return;
  }

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

  link.onload = () => callback?.(null);
  link.onerror = () => callback?.(new Error(`Failed to load CSS: ${url}`));

  document.head.appendChild(link);
}