Question

有没有办法加载外部CSS文件，比如我们使用.getScript方法加载JS文件，也使用像.getScript中的回调函数

$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "/styles/yourcss.css"
}).appendTo("head");

这适用于FireFox和类似但不在IE中。

Answer 1

在jQuery 1.4中：

$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "/styles/yourcss.css"
}).appendTo("head");

http://api.jquery.com/jQuery/#jQuery2

Answer 2

基于回复的快速功能。

loadCSS = function(href) {

  var cssLink = $("<link>");
  $("head").append(cssLink); //IE hack: append before setting href

  cssLink.attr({
    rel:  "stylesheet",
    type: "text/css",
    href: href
  });

};

用法：

loadCSS("/css/file.css");

Answer 3

$("head").append("<link>");
var css = $("head").children(":last");
css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "address_of_your_css"
});

Answer 4

我认为OP想要做的是异步加载样式表并添加它。这适用于Chrome 22，FF 16和IE 8，用于存储为文本的CSS规则集：

$.ajax({
    url: href,
    dataType: 'text',
    success: function(data) {
        $('<style type="text/css">\n' + data + '</style>').appendTo("head");                    
    }                  
});

在我的情况下，我有时也希望加载的CSS替换之前以这种方式加载的CSS。为此，我在开头发表评论，说“/ *标记此ID = 102 * /”，然后我可以这样做：

// Remove old style
$("head").children().each(function(index, ele) {
    if (ele.innerHTML && ele.innerHTML.substring(0, 30).match(/\/\* Flag this ID=102 \*\//)) {
        $(ele).remove();
        return false;    // Stop iterating since we removed something
    }
});

Answer 5

    //load css first, then print <link> to header, and execute callback
    //just set var href above this..
    $.ajax({
          url: href,
          dataType: 'css',
          success: function(){                  
                $('<link rel="stylesheet" type="text/css" href="'+href+'" />').appendTo("head");
                //your callback
            }
    });

对于Jquery 1.2.6及更高版本（省略上面的花哨属性函数）。

我这样做是因为我认为这将确保您尝试将其粘贴到头部之前由ajax加载您请求的样式表。因此，在样式表准备就绪后执行回调。

Answer 6

根据您在@ Raul的回答中的评论，我可以想到两种方法来包含回调：

让getScript调用加载css的文件。
使用AJAX加载css文件的内容，并附加到<style>。您的回调将是来自$.get的回调或用于加载css文件内容的任何内容。

Answer 7

这是一个将通过成功或失败回调加载CSS文件的函数。如果一个或多个资源加载失败，则仅会调用一次失败回调。我认为这种方法比其他一些解决方案更好，因为使用HREF将元素插入DOM会引起额外的浏览器请求（尽管该请求可能来自缓存，具体取决于响应头）。

function loadCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            return $.get(url, function(css) {
                $("<style>" + css + "</style>").appendTo("head");
            });
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}

用法：

loadCssFiles(["https://test.com/style1.css", "https://test.com/style2.css",],
    function() {
    alert("All resources loaded");
}, function() {
    alert("One or more resources failed to load");
});

这是另一个可同时加载CSS 和 javascript文件的功能：

function loadJavascriptAndCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            if(url.endsWith(".css")) {
                return $.get(url, function(css) {
                    $("<style>" + css + "</style>").appendTo("head");
                });
            } else {
                return $.getScript(url);
            }
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}

Answer 8

$（“＃pageCSS”）。attr（'href'，'。/ css / new_css.css'）;

加载外部css文件，如jquery中的脚本，也兼容

8 个答案: