Die Webentwicklung wird immer komplexer und erfordert eine ständige Schulung neuer Technologien und Tools. Ein solches Werkzeug ist JavaScript, mit dem wir dynamische Webseiten erstellen können. Heute betrachten wir eine der wichtigsten Aufgaben - wie man eine CSS-Datei über JavaScript zu HTML hinzufügt.
Mit JavaScript können wir die Stile von Elementen auf einer Webseite ändern, aber manchmal müssen wir eine externe CSS-Datei einbinden, um die Stile auf alle Elemente anzuwenden. Dafür gibt es einige einfache Möglichkeiten, die wir weiter untersuchen werden.
Der erste Weg ist die Verwendung der Methode createElement() und appendChild(). Wir erstellen ein neues Element . wir setzen seine Attribute rel und href um den Elementtyp und den Pfad zur CSS-Datei anzugeben, fügen Sie das erstellte Element dann in die mit der Methode appendChild().
Die zweite Methode ist die Verwendung der Methode setAttribute(). Wir erstellen ein neues Element und dann mit der Methode setAttribute() wir setzen seine Attribute rel und href. Dann erhalten wir das Element mit der Methode getElementsByTagName() und fügen Sie das erstellte Element hinzu.
Beide Methoden sind ziemlich einfach und ermöglichen es uns, eine CSS-Datei einfach über JavaScript in HTML hinzuzufügen. Die Wahl einer bestimmten Methode hängt von Ihren Vorlieben und Anforderungen des Projekts ab. Jetzt wissen Sie, wie Sie eine CSS-Datei zu HTML hinzufügen und können Stile dynamisch mithilfe von JavaScript auf Ihre Webseiten anwenden.
Wie man eine CSS-Datei mit Javascript in html einfügt: einfache Möglichkeiten und Schritt für Schritt Anleitung
Es gibt mehrere Möglichkeiten, eine CSS-Datei mit JavaScript in HTML einzufügen.
Der erste Weg ist die Verwendung der Methode createElement() und Funktionen setAttribute(). Erstellen Sie ein Element mit der Methode und fügen Sie Attribute hinzu rel, type und href mit der Funktion . Fügen Sie dann das erstellte Element hinzu mit der Methode .
var cssLink = document.createElement("link");cssLink.setAttribute("rel", "stylesheet");cssLink.setAttribute("type", "text/css");cssLink.setAttribute("href", "styles.css");document.head.appendChild(cssLink);Die zweite Methode ist die Verwendung der Eigenschaft innerHTML. Erstellen Sie ein Element mit einem Tag und legen Sie die Eigenschaft fest innerHTML für . Innerhalb des Tags geben Sie die erforderlichen Attribute an rel, type und href.
document.head.innerHTML += "";Der dritte Weg ist die Verwendung der Funktion createElement() und Methode setAttribute() in Kombination mit der Methode insertBefore(). Hier erstellen Sie auch ein Element , fügen Attribute für die Beziehung, den Typ und den Pfad der CSS-Datei hinzu und fügen es dann mit der Methode am Anfang hinzu .
var cssLink = document.createElement("link");cssLink.setAttribute("rel", "stylesheet");cssLink.setAttribute("type", "text/css");cssLink.setAttribute("href", "styles.css");var head = document.head