加载外部的CSS文件就像在jQuery中也是兼容的脚本

有没有加载外部CSS文件的方法，就像我们使用.getScript方法加载JS文件，并使用.getScript中的callback函数

$("<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

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

Answer 3

基于响应的快速function。

 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 4

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

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

在我的情况下，我有时也希望加载的CSSreplace以前以这种方式加载的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加载，然后再试图将其粘贴到头部。 因此，样式表准备就绪后执行callback。

Answer 6

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