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

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