加载外部 css 文件，比如 jquery 中的脚本，这在 ie 中也是兼容的

小开

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

小开

最佳答案

在 jQuery 1.4中:

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

Http://api.jquery.com/jquery/#jquery2

小开

    //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 加载。因此，在样式表准备好之后执行回调。

小开

我认为 OP 想要做的是异步加载样式表并添加它。这对我在 Chrome22，FF 16和 IE8中的 CSS 规则文本存储来说是有效的:

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

在我的例子中，我有时还希望加载的 CSS 替换以前以这种方式加载的 CSS。为此，我在开头放置一个注释，比如“/* Flag this 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
}
});

小开

基于响应的快速函数。

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");

小开

$(“ # pageCSS”) . attr (‘ href’,’./css/new _ css. css’) ;

小开

根据你在@Raul 的回答下的评论，我可以想出两种方法来包括一个回复:

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

小开

下面是一个函数，它将加载具有成功或失败回调的 CSS 文件。如果一个或多个资源无法加载，则仅调用一次失败回调。我认为这种方法比其他一些解决方案更好，因为在 DOM 中插入带有 HREF 的元素会导致额外的浏览器请求(尽管请求可能来自缓存，这取决于响应头)。

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();
});


}