动态加载CSS可通过创建link标签实现，设置rel为stylesheet并插入head；需检查重复、支持onload/onerror回调以确保健壮性，适用于主题切换与懒加载。
在现代前端开发中，按需加载CSS资源可以有效提升页面初始加载速度。通过JavaScript动态创建 标签来引入外部样式表，是一种常见且兼容性良好的方式。
动态创建 link 标签的基本方法
使用 JavaScript 创建一个 link 元素，设置其 rel 属性为 "stylesheet"，并指定 href 为目标CSS文件路径，再将其插入到页面的 中即可生效。
示例代码：
const loadCSS = (url) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
};
// 调用函数加载样式
loadCSS('/styles/theme-dark.css');
避免重复加载相同样式
如果多次调用加载函数，可能会导致同一CSS被重复引入。可以通过检查已存在的 link 标签来防止重复加载。
立即学习“Java免费学习笔记（深入）”；
const loadCSSOnce = (url) => {
// 检查是否已加载
if (document.querySelector(`link[href="${url}"]`)) {
return;
}
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
};
支持加载完成回调
有时需要在样式加载完成后执行某些操作（如显示内容或初始化组件）。link 标签支持 onload 和 onerror 事件，可用于处理成功或失败的情况。
const loadCSSWithCallback = (url, onSuccess, onError) => {
if (document.querySelector(`link[href="${url}"]`)) {
onSuccess?.();
return;
}
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.onload = () => onSuccess?.();
link.onerror = () => onError?.(new Error(`Failed to load CSS: ${url}`));
document.head.appendChild(link);
};
// 使用示例
loadCSSWithCallback(
'/styles/animated-ui.css',
() => console.log('样式加载成功'),
(err) => console.error(err)
);
基本上就这些。这种方式灵活、轻量，适合在主题切换、懒加载组件样式或根据用户行为加载特定UI库时使用。不复杂但容易忽略细节，比如去重和错误处理，加上后会更健壮。
