So ändern Sie CSS mit JavaScript

Die HTML -Sprache ist einfach eine Markup -Sprache, die keine Funktionen ausführen kann und Codes basierend auf verschiedenen dynamischen Ereignissen ausführen kann. Zu diesem Zweck müssen wir JavaScript verwenden, um den CSS -Stil eines beliebigen HTML -Elements zu ändern, da HTML dies nicht selbst tun kann.

Es kann verschiedene Gründe geben, warum wir CSS ändern und mit HTML -Elementen manipulieren müssen. Es könnte sein, das Stylesheet dynamisch zu laden, die Farbe einer Schaltfläche zu ändern, wenn ein Benutzer darauf klickt, oder CSS in JavaScript zu schreiben. Alle diese Änderungen können über JavaScript vorgenommen werden. In diesem Artikel werden wir verschiedene Möglichkeiten für den Zugriff auf CSS mit JavaScript sehen und es ändern.

Verwenden von JavaScript, um CSS zu ändern

In JavaScript gibt es verschiedene Methoden, die beim Zugriff auf HTML -Elemente helfen und die Werte von CSS manipulieren können. Einige dieser Methoden werden unten zusammen mit Beispielen erläutert.

Verwenden von GetElements ByclassName ()

Die Methode GetElementByClassName () Nimmt eine Zeichenfolge als Klassenname ein und sucht das gesamte HTML -Dokument und gibt die Elemente mit demselben Klassennamen zurück. Sobald der Klassenname identifiziert wurde, können wir die CSS -Eigenschaften wie unten im Beispiel gezeigt ändern:

HTML:

Eingabefeld:


Grenze ändern

JavaScript:

Hier haben wir das HTML -Element nach Klassenname durchsucht und die CSS -Eigenschaften dieser Elemente verwendet Stil.Hintergrundfarbe Und Stil.Randfarbe.

Ausgang:

Verwenden Sie GetElementById ()

Eine andere Methode ist GetElementById () die alle HTML -Elemente mit ähnlichen IDs durchsucht und die zugewiesene Funktion auf sie ausführt. Meistens werden verschiedene Divs verwendet, die mit IDs zugeordnet sind, und diese IDs werden mit dieser Methode durchsucht. Dies sind die am häufigsten verwendeten Methoden von Entwicklern. Im Folgenden finden Sie ein Beispiel:

HTML:

Eingabefeld:


Grenze ändern

JavaScript:

Hier haben wir die Methode verwendet, um alle Elemente mithilfe ihrer ID zu durchsuchen und die CSS -Eigenschaften mit dem Stil zu ändern.

Ausgang:

Verwenden von QuerySelector ()

Eine andere Methode, die genau wie die oben genannten Methoden funktioniert, ist die QuerySelector () Methode, die nach Klassennamen, ID -Name und sogar nach HTML -Tags suchen kann, wird jedoch nur das erste zur Suche erwähnte HTML -Element zurückgegeben. Nachfolgend finden Sie die Möglichkeit, den QuerySelector zu verwenden:

dokumentieren.QuerySelector ("# id of div");
dokumentieren.QuerySelector (". CSS -Klassenname ");
dokumentieren.QuerySelector ("HTML -Tag wie: div>");

Im Folgenden finden Sie ein Beispiel für QuerySelector () und wie es mit Klassennamen, IDs usw. verwendet werden kann:

HTML:

Eingabefeld:


Grenze ändern

JavaScript:

Hier haben wir die Methode querySelector () verwendet, um nach Klassen und ID von Divs zu suchen, und ihre CSS -Eigenschaften geändert.

Ausgang:

Abschluss

Es gibt verschiedene Gründe, CSS zu ändern, und der beste Weg, dies zu tun, besteht darin. In diesem Artikel haben wir besprochen, wie CSS mit JavaScript geändert werden kann. Verschiedene Methoden, die in JavaScript angegeben sind, um die Werte von HTML -Elementen zu ändern. Diese machen die Arbeit von Entwicklern einfach und machen die Webseite dynamischer. Durch diese Methoden können wir die Schaltflächenfarben auf Klick, Hintergrundfarben, Schriftfarben usw. leicht und immer weiter mit CSS -Eigenschaften manipulieren.