web-dev-qa-db-fra.com

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

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 bien dans Firefox et Google Chrome, mais pas dans IE.

De l'aide? Merci

javascriptjqueryhtmlcssinternet-explorer
72
pistacchio

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 avec document.createStyleSheet(url)

Voir article MSDN sur createStyleSheet pour quelques détails supplémentaires.

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

Vous devez définir l'attribut href en dernier et uniquement après que l'élément de lien est ajouté à la tête:

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

Cela semble également fonctionner dans IE:

 var link = document.createElement ('link'); 
 link.rel = 'stylesheet'; 
 link.type = 'text/css'; 
 link.href = '/includes/style.css' ;;.. _________________document.getElementsByTagName('head')/1000.appendChild(link);;.____.]
3
cmanley

Cela pourrait également avoir quelque chose à voir avec cela - Tiré de Article de support Microsoft :

Les styles sur une page Web sont manquants ou semblent incorrects lorsque la page se charge dans les versions de Microsoft Internet Explorer ...

... Ce problème se produit car les conditions suivantes sont remplies dans Internet Explorer:

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

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

  • Sur les pages qui utilisent la règle @import pour importer en continu des feuilles de style externes qui importent d'autres feuilles de style, les feuilles de style de plus de trois niveaux sont ignorées.

2
urig

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 ...

1
campino2k

Ouvrez ie8 sans débogueur ouvert. Lorsque vous arrivez au point de feuille de style dynamique ... ouvrez le débogueur et le tour est joué, ils devraient être là.

0
oliver foster