Dieser Artikel beschreibt die Methode, Link -Tags dynamisch zu erstellen, in den Kopf von JavaScript. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Ich glaube, dass viele Front -End -Freunde auf die Notwendigkeit gestoßen sind, JavaScript zu verwenden, um Stylesheet -Tags dynamisch zu erstellen - Link -Tags. Hier sprechen wir darüber, wie Sie Link -Tags im Browser dynamisch erstellen können.
Erstellen Sie Link -Tags mit JQuery
Wenn Sie JQuery in der Entwicklung verwenden möchten, sollte die Verwendung von JQuery zum Erstellen von Link -Tags wie folgt aussehen:
Die Codekopie lautet wie folgt: var cssurl = '/style.css',
linkTag = $ ('<link href = "' + cssurl + '" rel = "styleSheet" type = "text /css" media = "' + (Media ||" All ") + '" charset = " + charset ||" utf-8 " +'" /> ');
// Siehe deutlich, dynamisch Link -Tags zum Kopf hinzufügen
$ ($ ('head') [0]). append (linktag);
Erstellen Sie Link -Tags mit dem nativen JavaScript
Wenn Sie reines und natürliches JavaScript mögen, müssen Sie es so schreiben:
Die Codekopie lautet wie folgt: var head = document.getElementsByTagName ('head') [0],
cssurl = '/style.css',
linktag = document.createelement ('link');
linktag.id = 'dynamisches Stil';
linktag.href = cssurl;
linkTag.setattribute ('rel', 'stylesheet');
linkTag.setattribute ('Media', 'All');
linkTag.SetatTribute ('Typ', 'text/css');
head.Appendchild (linktag);
IEs einzigartige Methode Createstilesheet
Die einzigartige Methode des IE ist ebenfalls sehr bequem.
Die Codekopie lautet wie folgt: var head = document.getElementsByTagName ('head') [0],
cssurl = 'Themen/Bluenight/style.css',
// document.createstyLesheet hat dem Kopf das Link -Tag hinzugefügt. Wie man es sagt, ist es ziemlich bequem
linkTag = document.createstyLesheet (CSSURL);
Die Methode von Createstilsheet ([Surl] [, iIndex]) akzeptiert zwei Parameter, und die Surl ist der URL -Pfad der CSS -Datei. iIndex ist ein optionaler Parameter, der sich auf die Indexposition der in der Seite eingefügten Stylesheets -Sammlung bezieht. Standardmäßig wird der neu erstellte Stil am Ende hinzugefügt.
Komplette Lösung
Grundsätzlich wurden alle eingeführt. Schauen wir uns die gesamte Lösung an:
Die Codekopie lautet wie folgt: Funktion createLink (cssurl, lnkid, charset, media) {
var head = $ ($ ('Kopf') [0]),
linktag = null;
if (! cssurl) {
false zurückgeben;
}
linkTag = $ ('<link href = "' + cssurl + '" rel = "styleSheet" type = "text /css" media = "' + (Media ||" All ") + '" charset = " + charset ||" utf-8 " +'" /> ');
head.Append (linktag);
}
Funktion createLink (cssurl, lnkid, charset, medien) {
var head = document.getElementsByTagName ('head') [0],
linktag = null;
if (! cssurl) {
false zurückgeben;
}
linktag = document.createelement ('link');
linkTag.SetatTribute ('id', (lnkid || 'Dynamisches Stil'));
linkTag.setattribute ('rel', 'stylesheet');
linkTag.SetAttribute ('charSet', (charSet || 'utf-8'));
linkTag.SetatTribute ('Media', (Media || 'All'));
linkTag.SetatTribute ('Typ', 'text/css');
linktag.href = cssurl;
head.Appendchild (linktag);
}
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.