jQuery动态加载CSS文件的多种方法

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

// 使用示例
loadCSS('https://example.com/style.css');

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

// 带成功/失败回调的 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 加载失败!')
);

// 存储主题 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'));

function loadCSS(url, id) {
    // 检查是否已存在
    if ($('link#' + id).length) return; 

    $('<link>', {
        id: id,
        rel: 'stylesheet',
        href: url
    }).appendTo('head');
}

// 使用
loadCSS('popup.css', 'popup-styles');