J'ai récemment travaillé sur un projet qui nécessitait que JavaScript insère dynamiquement des styles, mais la méthode précédente a échoué ! La raison pour laquelle j'ai vérifié pendant 2 heures s'est avérée être mes pauvres mains. Parlons-en en dernier !
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. La tâche que j'ai effectuée récemment était que lorsqu'un utilisateur clique sur un bouton sur le site de quelqu'un d'autre, un script sera inséré et exécuté sous la page de l'autre site. Cela inclut l'insertion de styles.
En général, il existe deux types de styles d'insertion dynamique JavaScript. L'un consiste à introduire des styles externes dans la page et à utiliser la balise dans
; La balise style> insère le style de la page (ce n'est pas l'attribut style).1. Introduisez des styles externes dans la page :
Utilisez la balise dans
pour introduire un fichier de style externe. C'est relativement simple et il n'y a aucun problème de compatibilité avec les principaux 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);
}
includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227");
Cependant, dans le projet sur lequel je travaille actuellement, il y a très peu de styles appliqués. Il semble inapproprié d'introduire directement un fichier de style externe, j'ai donc choisi la deuxième option, en utilisant la balise
