Pourquoi le chargement CSS dynamique échoue-t-il dans IE et comment puis-je y remédier ?

Échec du chargement dynamique du CSS dans IE : une solution

Dans le but d'améliorer l'esthétique des pages Web, il est souvent nécessaire de charger dynamiquement le CSS feuilles de style. Bien que cette technique fonctionne parfaitement dans les navigateurs populaires comme Firefox et Google Chrome, elle se heurte à un obstacle dans Internet Explorer (IE).

En utilisant jQuery, une manière courante d'obtenir un chargement CSS dynamique est :

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

Cependant, IE présente un défi unique, car cette méthode ne donne pas les résultats souhaités dans ce navigateur.

Pour surmonter cet obstacle, il est essentiel de adopter une approche spécifique au navigateur. Lorsque IE rencontre une situation dans laquelle tous les styles chargés avec la page ont été traités, la seule solution fiable pour ajouter des feuilles de style supplémentaires consiste à utiliser la méthode document.createStyleSheet(url).

Une implémentation multi-navigateurs efficace peut être obtenu en employant le code suivant :

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

En s'adaptant au comportement unique d'IE via la méthode document.createStyleSheet, il devient possible de charger dynamiquement Feuilles de style CSS dans tous les principaux navigateurs, garantissant des améliorations visuelles cohérentes sur diverses plates-formes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!