Le chargement dynamique de la feuille de style css ne fonctionne pas sur IE

Question

Je charge dynamiquement une feuille de style css (avec un peu d'aide de jQuery) comme ceci:

 var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);
 

Cela fonctionne très bien dans Firefox et Google Chrome, mais pas dans IE.

De l'aide? Merci

Answer 1

Une fois que IE a traité tous les styles chargés avec la page, le seul moyen fiable d’ajouter une autre feuille de style est de document.createStyleSheet(url)

Voir l' article MSDN sur createStyleSheet pour plus de détails.

 url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}
 

Answer 2

Vous devez définir le href attr en dernier et seulement après que l'elem de lien est ajouté à la tête:

 $('<link>')
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');
 

Answer 3

Cela semble aussi fonctionner dans IE:

var link = document.createElement ('link');
link.rel = 'stylesheet';
link.type = 'text / css';
link.href = '/includes/style.css';
document.getElementsByTagName ('head') [0] .appendChild (lien);

Answer 4

Cela pourrait aussi avoir quelque chose à faire avec elle - Pris de article du Support Microsoft:

Styles sur une page web sont manquants ou regarder incorrecte lorsque la page se charge dans les versions de Microsoft Internet Explorer ...

...Ce problème se produit parce que le conditions suivantes sont remplies dans Internet Explorer:

• Toutes les balises de style après la première 31 les balises de style ne sont pas appliqués.

• Toutes les règles de style après le première 4,095 règles ne sont pas appliquées.

• Sur les pages qui utilise les @import règle la permanence de l'importation de style externe les feuilles de l'importation d'autres feuilles de style, les feuilles de style qui sont plus de trois niveaux de profondeur sont ignorés.

Answer 5

Il paraît que

 $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
 

fonctionne également dans IE tant que l'URL est un URI complet, y compris le protocole ...