如何通过javascript动态加载css文件-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-12 17:22:01

原创

913人浏览过

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

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

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

创建 link 标签插入 DOM

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

具体步骤如下：

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

示例代码：

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

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进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);
}

登录后复制

基本上就这些。这种方式简单、兼容性好，适用于大多数现代浏览器和旧版浏览器。

以上就是如何通过javascript动态加载css文件的详细内容，更多请关注php中文网其它相关文章！