Einführung in 2 Methoden zur dynamischen Referenzierung von CSS-Dateien in Javascript_Grundkenntnisse

Ich habe kürzlich an einem Projekt gearbeitet, das JavaScript zum dynamischen Einfügen von Stilen erforderte, aber die vorherige Methode ist fehlgeschlagen! Der Grund, warum ich zwei Stunden lang nachgesehen habe, waren meine schlechten Hände. Reden wir zuletzt darüber!

Javascript-Einfügungsstile werden häufig in der Front-End-Entwicklung verwendet, insbesondere wenn die Front-End-Leistung und das Skinning von Seiten geändert werden. Die Aufgabe, die ich kürzlich erledigt habe, bestand darin, dass ein Skript unter der Seite der anderen Site eingefügt und ausgeführt wird, wenn ein Benutzer auf eine Schaltfläche klickt. Dazu gehört auch das Einfügen von Stilen.

Im Allgemeinen gibt es zwei Arten von dynamischen Einfügungsstilen in JavaScript. Der eine besteht darin, externe Stile in die Seite einzuführen und den -Tag zu verwenden ; Das style>-Tag fügt den Seitenstil ein (dies ist nicht das style-Attribut).

1. Externe Stile in die Seite einführen:

Verwenden Sie das Tag in . Dies ist relativ einfach und es gibt keine Kompatibilitätsprobleme mit den wichtigsten Browsern:

Code kopieren Der Code lautet wie folgt:

Funktion 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");

In dem Projekt, an dem ich gerade arbeite, gibt es jedoch nur sehr wenige angewendete Stile. Es scheint unangemessen, eine externe Stildatei einzuführen, daher habe ich die zweite Option gewählt und das