So ändern Sie den HTML -Stil durch JavaScript

So ändern Sie den HTML -Stil durch JavaScript

Das HTML -DOMR -Akronym für Dokumentobjektmodell ist eine Programmierschnittstelle für Dokumente, die in HTML und XML geschrieben wurden. Es bietet den Dokumenten eine logische Struktur. HTML DOM definiert, wie HTML -Dokumente bewertet und geändert werden können. Mithilfe von HTML DOM können Sie den Stil von HTML -Elementen über JavaScript ändern.

Die Style -Eigenschaft von HTML DOM wird verwendet, um den Stil von HTML -Elementen zu ändern.

Stileigenschaft von HTML Dom

Ein Stilattribut eines HTML. Um dieses CSSstyledeClaration -Objekt zurückzugeben, wird die Style -Eigenschaft verwendet. Diese Eigenschaft wird verwendet, um den Elementstil mit verschiedenen CSS -Eigenschaften zu erhalten oder festzulegen.

Syntax

Die Syntax der Eigenschaft im HTML -Dom -Stil wird wie folgt angegeben.

dokumentieren.GetElementById (ID).Stil.Eigenschaft = neuer Stil

Wenn Sie einfach eine Style -Eigenschaft erhalten möchten, verwenden Sie die folgende Syntax.

Element.Stil.Eigentum

Wenn Sie jedoch eine Style -Eigenschaft festlegen möchten, verwenden Sie die angegebene Syntax

Element.Stil.Eigenschaft = Wert

Jetzt, da wir ein grundlegendes Verständnis dafür haben, was die Eigenschaft im HTML Dom -Stil ist. Wir werden nun einige relevante Beispiele untersuchen.

Ändern des HTML -Stils

Die angegebenen Beispiele zeigen, wie wir mit JavaScript den Stil von HTML -Elementen ändern können.

Beispiel 1
Angenommen, Sie möchten die Farbe von ändern

Element mit seiner ID.




HTML Dom Style -Eigenschaft


HTML Dom Style -Eigenschaft




Im obigen Beispiel haben wir zuerst zwei definiert

Elemente und zugewiesen ihnen eine eindeutige ID.

HTML Dom Style -Eigenschaft


HTML Dom Style -Eigenschaft

Wir haben dann die Farbe von geändert

Element mit id = "para2". Im folgenden Code, in dem wir einfach unser gewünschtes Element durch seine ID erhalten und seine Farbe in Rot ändern.

So sah es aus, bevor es die Farbe änderte.

Nach dem Ändern der Farbe.

Beispiel 2
Nehmen wir an, Sie möchten sowohl die Farbe als auch die Schriftfamilie von ändern

Element mit seiner ID.




Lernen HTML DOM


Lernen HTML DOM




Im obigen Beispiel haben wir zuerst zwei definiert

Elemente und zugewiesen ihnen eine eindeutige ID.

Lernen HTML DOM


Lernen HTML DOM

Wir haben dann die Farbe und die Schriftfamilie von geändert

Element mit id = "head2". Im folgenden Code, in dem wir einfach unser gewünschtes Element durch seine ID erhalten und seine Farbe in Blau und Schriftfamilie in Arial ändern.


Geshi -Fehler: Geshi konnte das Sprache Jacascript nicht finden (mit Pfad/Home/Nginx/Domänen/LinuxHint.com/public/wp-content/plugins/codecolorer/lib/veshi/) (Code 2)

So sah es aus, bevor es die Farbe und die Schriftfamilie veränderte.

Nachdem sie die Farbe und die Schriftfamilie geändert haben, sieht es so aus.

Abschluss

Um den Stil von HTML -Elementen mit JavaScript zu ändern, verwenden wir die Eigenschaft HTML Dom Style. Mit der Eigenschaft HTML DOM Style können Sie den Stil eines HTML -Elements abrufen oder festlegen. Es kann unterschiedliche Ansätze geben, um diese Eigenschaft zu verwenden, um den Stil von HTML -Elementen zu verändern. Dieses Tutorial umfasst die Eigenschaft im HTML -Dom -Stil und verschiedene Ansätze, mit denen der Stil von HTML -Elementen verändert werden kann.