Explication détaillée de l'utilisation de Javascript pour importer dynamiquement des styles et des fichiers de l'extérieur

Les styles d'insertion Javascript sont largement utilisés dans le développement front-end, en particulier lors de la modification des performances front-end et de l'habillage des pages.

Généralement, il existe deux types de styles d'insertion dynamique JavaScript. L'un consiste à introduire des styles externes dans la page et à utiliser la balise 2cdf5bf648cf2f33323966d7f58a7f3f L'autre est Utiliser la balise c9ccee2e6ea535a969eb3f532ad9fe89 pour insérer des styles de page dans la page (ce n'est pas l'attribut style).

1. Introduisez des styles externes dans la page :

Utilisez la balise 2cdf5bf648cf2f33323966d7f58a7f3f pour introduire un fichier de style externe. et est populaire parmi tous les grands courants. Il n'y a pas de problème de compatibilité avec les navigateurs :

function includeLinkStyle(url) {
 var link = document.createElement("link");
 link.rel = "stylesheet";
 link.type = "text/css";
 link.href = url;
 document.getElementsByTagName("head")[0].appendChild(link);
}

Il semble inapproprié d'introduire directement un fichier de style externe, j'ai donc choisi la deuxième option et je l'ai inséré dans la page en utilisant la balise c9ccee2e6ea535a969eb3f532ad9fe89

2. Utilisez la balise c9ccee2e6ea535a969eb3f532ad9fe89 pour insérer le style de page :

Cette méthode présente des problèmes de compatibilité dans divers navigateurs grand public, comme Les navigateurs standards tels que Firefox ne peuvent pas obtenir directement la valeur cssText du paramètre styleSheet. Sous les navigateurs standards, vous ne pouvez utiliser que document.styleSheets[0].cssRules[0].cssText pour obtenir le style individuellement en même temps, utilisez : document ; .styleSheets[0].cssRules[ 0].cssText=newcssText; La page ne mettra pas automatiquement à jour le style, vous devez utiliser : document.styleSheets[0].cssRules[0].style.cssText=newcssText ; convivial et simple comme l'IE tricheur. Une bonne méthode est utilisée dans YUI : style.appendChild(document.createTextNode(styles)); Utilisez createTextNode pour ajouter la chaîne de style à la balise c9ccee2e6ea535a969eb3f532ad9fe89 appliqué directement aux éléments, que vos éléments soient ajoutés ou non via des scripts.

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!