HTML lädt dynamisch CSS-Stile und JS-Skripte – Beispiel

1. Dynamisches Laden von Skripten

Mit der wachsenden Nachfrage nach Websites steigt allmählich auch die Nachfrage nach Skripten. Wir müssen zu viele JS-Skripte einführen und die Leistung der gesamten Site reduzieren, daher entstand das Konzept dynamischer Skripte, um die entsprechenden Skripte zum richtigen Zeitpunkt zu laden.
Beispiel: Wir möchten die Erkennungsdatei einführen, wenn wir den Browser erkennen müssen.

Code kopieren

Der Code lautet wie folgt:

<Skripttyp="text/javascript">
fenster.onload = funktion(){
Alarm (Typ der Browsererkennung);
}
var flag = true; //Auf true setzen und dann laden
wenn (Flagge) {
loadScript('browserdetect.js'); //Setze das geladene js
}
Funktion loadScript(url) {
var Skript = Dokument.createElement('Skript');
script.type = "text/javascript";
script.src = URL;
//document.head.appendChild(script); //document.head bedeutet <head>
document.getElementsByTagName('Kopf')[0].appendChild(Skript);
}
</script>Dynamische Ausführung von js</p> <p>
<Skripttyp="text/javascript">
fenster.onload = funktion(){

}
var flag = true; //Auf true setzen und dann laden
wenn (Flagge) {
var Skript = Dokument.createElement('Skript');
script.type = "text/javascript";
var text = document.createTextNode("alert('Lee')"); //IE6,7,8 Browser melden einen Fehler
script.appendChild(text);
document.getElementsByTagName('Kopf')[0].appendChild(Skript);
}
</script>Die Browser IE 6, 7 und 8 betrachten Skripts als spezielles Element und können nicht auf untergeordnete Knoten zugreifen. Aus Kompatibilitätsgründen kann stattdessen das Textattribut verwendet werden. </p> <p>
<Skripttyp="text/javascript">
fenster.onload = funktion(){

}
var flag = true; //Auf true setzen und dann laden
wenn (Flagge) {
var Skript = Dokument.createElement('Skript');
script.type = "text/javascript";
script.text = "alert('Lee')";
script.appendChild(text);
document.getElementsByTagName('Kopf')[0].appendChild(Skript);
}
</script> Muss mit allen Browsern kompatibel sein

2. Stile dynamisch laden

Um Stylesheets dynamisch zu laden, beispielsweise beim Wechseln von Website-Skins. Es gibt zwei Möglichkeiten, ein Stylesheet zu laden: eine ist das <link>-Tag und die andere ist das <style>-Tag.

Dynamische Ausführunglink

Code kopieren

Der Code lautet wie folgt:

varflag = wahr;
wenn (Flagge) {
: Laden Sie Styles('basic.css');
}
Funktion loadStyles(url) {
var link = document.createElement('link');link.rel = 'Stylesheet';
link.typ = "text/css";
link.href = URL;
document.getElementsByTagName('head')[0].appendChild(link);
}

Dynamischer Ausführungsstil

Code kopieren

Der Code lautet wie folgt:

<Skripttyp="text/javascript">
varflag = wahr;
wenn (Flagge) {
var Stil = document.createElement('Stil');
Stil.Typ = "Text/CSS";
//var box = document.createTextNode('#box{background:red}'); // IE6,7,8 wird nicht unterstützt
//Stil.AnhängenUntergeordnetesElement(Box);
document.getElementsByTagName('Kopf')[0].appendChild(Stil);
insertRule(document.styleSheets[0], '#box', 'Hintergrund:rot', 0);
}
Funktion insertRule(Blatt, SelektorText, CSSText, Position) {
//Wenn es nicht IE6,7,8 ist
wenn (Blatt.Regel einfügen) {
Blatt.InsertRule(SelectorText + "{" + cssText + "}", Position);
//Wenn es IE6,7,8 ist
} sonst wenn (sheet.addRule) {
sheet.addRule(SelektorText, CSSText, Position);
}
}
</Skript>

<<: CSS zum Erzielen des Skeleton Screen-Effekts

>>: Layui implementiert den Bestätigungscode der Anmeldeschnittstelle

Einführung in die Verwendung des Formulars „OnSubmit“ und des Eingabetyps „Bild“

HTML lädt dynamisch CSS-Stile und JS-Skripte – Beispiel

Einführung in die Verwendung des Formulars „OnSubmit“ und des Eingabetyps „Bild“

WeChat-Applet implementiert Suchfunktion und springt zur Suchergebnisseite

Der Unterschied zwischen z-index: 0 und z-index: auto in CSS

Anleitung zur Verwendung von env in vue cli

So verwenden Sie die MySQL DATEDIFF-Funktion, um das Zeitintervall zwischen zwei Daten zu ermitteln

Detaillierte Erklärung der Softwarekonfiguration mit Docker-Compose unter Linux

Zusammenfassung häufig verwendeter Zeit-, Datums- und Konvertierungsfunktionen in MySQL

Einführung in TypeScript-Schnittstellen

Detaillierte Erklärung des JavaScript-Fortschrittsmanagements

Beispiel zum Erstellen eines MySQL-Clusters mit Docker

Artikel empfehlen

Node.js versendet E-Mails basierend auf dem STMP-Protokoll und dem EWS-Protokoll

Detaillierte Erläuterung von 5 Lösungen für das adaptive CSS-Layout für Fortgeschrittene

Detaillierte Erläuterung des Überwachungsmethodenfalls von Vue

Grafisches Tutorial zum Konfigurieren des Nginx-Dateiservers im Windows 10-System

Gründe für den plötzlichen Leistungsabfall bei MySQL

Detaillierte Erklärung zur Verwendung von Rastereigenschaften in CSS

Praktischer Bericht über die Entwicklung von Vue3- und TypeScript-Projekten

JS Leicht verständliche Funktion und Konstruktor

CocosCreator Skelettanimation Drachenknochen

CentOS7-Installations-Tutorial für Zabbix 4.0 (Abbildung und Text)

Erstellen Sie einen hochverfügbaren MySQL-Cluster mit Dual-VIP

Zusammenfassung der Verwendung von vue Watch und Computed

CSS zum Erzielen von leuchtendem Text und ein paar JS-Spezialeffekten

Linux-Grundlagen-Tutorial: Sonderberechtigungen SUID, SGID und SBIT

js, um einen gleitenden Karusselleffekt zu erzielen