Cet article décrit la méthode de création de balises de liaison dynamiquement dans la tête de JavaScript. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Je crois que de nombreux amis frontaux ont rencontré la nécessité d'utiliser JavaScript pour créer dynamiquement des balises de feuille de style - balises de liaison. Ici, nous parlerons de la façon de créer dynamiquement des balises de liaison dans le navigateur.
Créer des balises de liaison avec jQuery
Si vous aimez utiliser jQuery en développement, l'utilisation de jQuery pour créer des balises de liaison devrait ressembler à ceci:
La copie de code est la suivante: var cssurl = '/style.css',
linktag = $ ('<link href = "' + cssurl + '" rel = "stylesheet" type = "text / css" media = "' + (media ||" all ") + '" charset = "' + charset ||" utf-8 "+ '" "/>');
// Veuillez voir clairement, ajouter dynamiquement des balises de liaison à la tête
$ ($ ('head') [0]). APPEND (linktag);
Créer des balises de liaison à l'aide de JavaScript natif
Si vous aimez le JavaScript pur et naturel, vous devez l'écrire comme ceci:
La copie de code est la suivante: var head = document.getElementsByTagName ('Head') [0],
cssurl = '/style.css',
linktag = document.createElement ('link');
linktag.id = «style dynamique»;
linktag.href = cssurl;
linktag.setAttribute ('rel', 'stylesheet');
linktag.setAttribute («Media», «all»);
linktag.setAttribute ('type', 'text / css');
head.appendChild (linktag);
Ie's Unique Method Createstylesheet
La méthode unique d'IE est également très pratique.
La copie de code est la suivante: var head = document.getElementsByTagName ('Head') [0],
cssurl = 'thèmes / bluenight / style.css',
// Document.Createstylesheet a ajouté la balise de liaison à la tête. Comment le dire, c'est assez pratique
linktag = document.CreateSetylesHeet (CSSURL);
La méthode Createstylesheet ([Surl] [, iindex]) accepte deux paramètres, et le Surl est le chemin d'accès URL du fichier CSS. Iindex est un paramètre facultatif, qui fait référence à la position d'index de la collection Styleshets insérée dans la page. Par défaut, le style nouvellement créé est ajouté à la fin.
Compléter la solution
Fondamentalement, tous ont été présentés, jetons un coup d'œil à la solution complète:
La copie de code est la suivante: fonction CreateLink (cssurl, lnkid, charset, média) {
var head = $ ($ ('head') [0]),
linktag = null;
if (! csSurl) {
retourne false;
}
linktag = $ ('<link href = "' + cssurl + '" rel = "stylesheet" type = "text / css" media = "' + (media ||" all ") + '" charset = "' + charset ||" utf-8 "+ '" "/>');
head.append (linktag);
}
fonction createLlink (cssurl, lnkid, charset, média) {
var head = document.getElementsByTagName ('Head') [0],
linktag = null;
if (! csSurl) {
retourne false;
}
linktag = document.createElement ('link');
linktag.setAttribute ('id', (lnkid || 'dynamic-style'));
linktag.setAttribute ('rel', 'stylesheet');
linktag.setAttribute («Charset», (Charset || «UTF-8»));
linktag.setAttribute («Media», (Media || «All»));
linktag.setAttribute ('type', 'text / css');
linktag.href = cssurl;
head.appendChild (linktag);
}
J'espère que cet article sera utile à la programmation JavaScript de tous.