So erstellen Sie mit JavaScript_Javascript-Kenntnissen dynamisch Link-Tags im Kopf

Das Beispiel in diesem Artikel beschreibt die Methode zum dynamischen Erstellen von Link-Tags im Head mithilfe von JavaScript. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Ich glaube, viele Front-End-Freunde sind auf die Notwendigkeit gestoßen, JavaScript zum dynamischen Erstellen von Stylesheet-Tags – Link-Tags – zu verwenden. Hier sprechen wir darüber, wie man Link-Tags dynamisch im Browser erstellt.

Verwenden Sie jQuery, um Link-Tags zu erstellen

Wenn Sie jQuery in der Entwicklung verwenden möchten, sollte die Verwendung von jQuery zum Erstellen des Link-Tags wie folgt aussehen:

Code kopieren Der Code lautet wie folgt:

var cssURL = '/style.css',
linkTag = $('<link href="' cssURL '" rel="stylesheet" type="text/css" media="' (media || "all") '" charset="' charset || "utf -8" '" />');
// Bitte beachten Sie, dass der Link-Tag dynamisch zum Kopf hinzugefügt wird
$($('head')[0]).append(linkTag);

Erstellen Sie Link-Tags mit nativem JavaScript

Wenn Sie reines natürliches JavaScript mögen, müssen Sie so schreiben:

Code kopieren Der Code lautet wie folgt:

var head = document.getElementsByTagName('head')[0],
cssURL = '/style.css',
LinkTag = document.createElement('link');

LinkTag.id = 'dynamic-style';
linkTag.href = cssURL;
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('media','all');
linkTag.setAttribute('type','text/css');

head.appendChild(linkTag);

Die einzigartige Methode im IE createStyleSheet

Die für den IE einzigartige Methode createStyleSheet ist ebenfalls sehr praktisch.

Code kopieren Der Code lautet wie folgt:

var head = document.getElementsByTagName('head')[0],
cssURL = 'themes/BlueNight/style.css',
// document.createStyleSheet Das Link-Tag wurde gleichzeitig zum Kopf hinzugefügt, es ist ziemlich praktisch
LinkTag = document.createStyleSheet(cssURL);

Die Methode createStyleSheet([sURL] [, iIndex]) akzeptiert zwei Parameter: sURL ist der URL-Pfad der CSS-Datei. iIndex ist ein optionaler Parameter, der sich auf die Indexposition des eingefügten Links in der Stylesheets-Sammlung auf der Seite bezieht. Standardmäßig wird der neu erstellte Stil am Ende hinzugefügt.

Komplettlösung

Im Grunde ist die Einführung vorbei, werfen wir einen Blick auf die vollständige Lösung:

Code kopieren Der Code lautet wie folgt:

function createLink(cssURL,lnkId,charset,media){
var head = $($('head')[0]),
LinkTag = null;

if(!cssURL){
Gibt false zurück;
}

linkTag = $('<link href="' cssURL '" rel="stylesheet" type="text/css" media="' (media || "all") '" charset="' charset || "utf -8" '" />');

head.append(linkTag);
}
Funktion createLink(cssURL,lnkId,charset,media){
var head = document.getElementsByTagName('head')[0],
        linkTag = null;

if(!cssURL){
Gibt false zurück;
}
 
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'all'));
linkTag.setAttribute('type','text/css');
LinkTag.href = cssURL;

Head.appendChild(linkTag);
}

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.