Charger fichier css externe, comme les scripts jquery qui est compatible sous ie aussi

Question

Est-il un moyen de charger des fichiers CSS externes, comme nous charger fichier JS en utilisant .getScript méthode et également utiliser la fonction de rappel comme dans .getScript

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

Cela Fonctionne dans FireFox et similaire mais pas sous IE.

Answer 1

En jQuery 1.4:

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

http://api.jquery.com/jQuery/#jQuery2

Answer 2

Rapide la fonction basée sur les réponses.

loadCSS = function(href) {

  var cssLink = $("<link>");
  $("head").append(cssLink); //IE hack: append before setting href

  cssLink.attr({
    rel:  "stylesheet",
    type: "text/css",
    href: href
  });

};

Utilisation:

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

Je pense que ce que l'OP voulais faire était de charger une feuille de style de manière asynchrone et l'ajouter. Cela fonctionne pour moi en Chrome 22, FF 16 et IE 8 pour les ensembles de règles CSS stockées sous forme de texte:

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

Dans mon cas, j'ai aussi parfois besoin de l'chargé CSS pour remplacer le CSS qui a été précédemment chargé de cette manière. Pour ce faire, j'ai mis un commentaire au début, dire "/* Drapeau de cette ID=102 */", et puis je peux faire ceci:

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

Pour Jquery 1.2.6 et au-dessus ( en omettant la fantaisie des attributs des fonctions ci-dessus ).

Je suis en train de faire de cette façon parce que je pense que cela permettra d'assurer que votre feuille de style est chargé en ajax avant d'essayer de l'enfoncer dans la tête. Par conséquent, la fonction de rappel est exécuté après la feuille de style est prêt.