在jQuery中加载外部css文件

Question

有没有一种方法可以加载外部CSS文件，例如我们使用.getScript方法加载JS文件，也可以使用.getScript中的回调函数

$("<link/>", {

   rel: "stylesheet",

   type: "text/css",

   href: "/styles/yourcss.css"

}).appendTo("head");

这在FireFox和类似版本中有效，但在IE中无效。

Answer 1

基于响应的快速功能。loadCSS = function(href) {&nbsp; var cssLink = $("<link>");&nbsp; $("head").append(cssLink); //IE hack: append before setting href&nbsp; cssLink.attr({&nbsp; &nbsp; rel:&nbsp; "stylesheet",&nbsp; &nbsp; type: "text/css",&nbsp; &nbsp; href: href&nbsp; });};用法：loadCSS("/css/file.css");

Answer 2

我认为OP想要做的是异步加载样式表并添加它。对于Chrome 22，FF 16和IE 8，这对于我来说适用于存储为文本的CSS规则集：$.ajax({&nbsp; &nbsp; url: href,&nbsp; &nbsp; dataType: 'text',&nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; $('<style type="text/css">\n' + data + '</style>').appendTo("head");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;});就我而言，有时我还希望加载的CSS替换以前以这种方式加载的CSS。为此，我在开头添加了一个注释，说“ / *标记此ID = 102 * /”，然后可以执行以下操作：// Remove old style$("head").children().each(function(index, ele) {&nbsp; &nbsp; if (ele.innerHTML && ele.innerHTML.substring(0, 30).match(/\/\* Flag this ID=102 \*\//)) {&nbsp; &nbsp; &nbsp; &nbsp; $(ele).remove();&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; // Stop iterating since we removed something&nbsp; &nbsp; }});