在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) {

  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 2

我认为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

    }

});