如何在HTML模板中动态引入CSS_脚本控制link加载

P粉602998670 2025-11-24 00:00:00 次阅读

答案：通过JavaScript动态创建link标签并插入head，可实现CSS按需加载，适用于主题切换等场景。示例代码展示loadCSS函数创建link元素、设置rel和href属性并插入文档头，支持控制加载时机如点击事件或滚动触发，通过查询已存在href避免重复加载，并监听load和error事件处理加载完成或失败，确保资源灵活高效加载。

在HTML模板中动态引入CSS，可以通过JavaScript控制 link 标签的创建与插入，实现按需加载样式文件。这种方式适用于主题切换、懒加载资源或根据用户行为加载特定样式等场景。

动态创建link标签

通过 JavaScript 创建 link 元素并添加到页面的中，即可动态加载CSS文件。

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

示例代码：

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

// 调用
loadCSS('/styles/theme-dark.css');

控制加载时机

可以根据条件决定何时加载CSS，比如用户操作、设备类型或页面状态。

在按钮点击后加载新样式
根据屏幕宽度动态加载适配样式
页面初始化时不加载，滚动到某区域再加载

示例：点击切换主题

document.getElementById('theme-toggle').addEventListener('click', () => {
  loadCSS('/styles/theme-blue.css');
});

避免重复加载

多次调用可能重复插入相同CSS，可通过检查 href 是否已存在来防止。

function loadCSS(href) {
  // 检查是否已加载
  if (document.querySelector(`link[href="${href}"]`)) {
    return;
  }
  
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.appendChild(link);
}

监听加载完成

有时需要在样式加载完成后执行某些操作，可以监听 load 和 error 事件。

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

  link.onload = () => {
    console.log('CSS加载完成:', href);
    onload && onload();
  };

  link.onerror = () => {
    console.error('CSS加载失败:', href);
  };

  document.head.appendChild(link);
}