【前端】jQuery动态加载CSS方法总结

在jQuery 中动态加载 CSS 文件有多种方法，以下是几种常用实现方式：

---

方法 1：创建 <link> 标签（推荐）

// 动态加载外部 CSS 文件
function loadCSS(url) {$('<link>', {rel: 'stylesheet',type: 'text/css',href: url}).appendTo('head');
}// 使用示例
loadCSS('https://example.com/style.css');

---

方法 2：通过 AJAX 加载 CSS 内容

// 直接注入 CSS 代码（适合小文件或动态样式）
$.get('path/to/your.css', function(css) {$('<style type="text/css">\n' + css + '</style>').appendTo('head');
});

---

方法 3：使用回调检测加载状态

// 带成功/失败回调的 CSS 加载
function loadCSS(url, success, error) {const link = $('<link>', {rel: 'stylesheet',href: url}).appendTo('head');// 检测加载状态（注意：部分浏览器不支持 link.onload）link[0].onload = function() { success && success() };link[0].onerror = function() { error && error() };
}// 使用示例
loadCSS('theme.css', () => console.log('CSS 加载成功!'),() => console.error('CSS 加载失败!')
);

---

方法 4：动态切换主题（结合 CSS 类）

// 存储主题 URL
const themes = {dark: 'css/dark-theme.css',light: 'css/light-theme.css'
};// 切换主题函数
function switchTheme(themeName) {// 移除旧主题$('link[data-theme]').remove();// 添加新主题$('<link>', {rel: 'stylesheet','data-theme': themeName,href: themes[themeName]}).appendTo('head');
}// 使用示例
$('#btn-dark').click(() => switchTheme('dark'));
$('#btn-light').click(() => switchTheme('light'));

---

注意事项：

1. 跨域问题：如果 CSS 文件在外部域名，确保服务器配置了正确的 CORS 策略
2. 性能优化：避免重复加载相同 CSS（可通过检查 <link> 是否存在）
3. 兼容性：onload 事件在旧版 IE 中支持有限，可用 setInterval 检测 sheet.cssRules 属性作为降级方案
4. 推荐方法：优先使用创建 <link> 标签的方式（支持缓存且符合浏览器加载机制）

---

完整示例：带重复加载检查

function loadCSS(url, id) {// 检查是否已存在if ($('link#' + id).length) return; $('<link>', {id: id,rel: 'stylesheet',href: url}).appendTo('head');
}// 使用
loadCSS('popup.css', 'popup-styles');

根据需求选择合适的方法，通常方法 1 是最简单且符合标准的方式。