答案：通过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);
}
基本上就这些。通过脚本控制 link 加载，灵活又实用，关键在于按需插入、防止重复、处理异常。不复杂但容易忽略细节。
