In diesem Leitfaden werden das Ziel und die Funktionsweise der „style“-Eigenschaft des HTML-DOM-Elements in JavaScript erläutert.
Wie funktioniert die „style“-Eigenschaft des HTML-DOM-Elements in JavaScript?
Das HTML-DOM „ Stil „ ist eine schreibgeschützte Eigenschaft, die entsprechend den zugewiesenen Stileigenschaften funktioniert. Außerdem wird das „ zurückgegeben. CSSStyleDeclaration ”-Objekt, das alle Inline-Stilattribute des jeweiligen HTML-Elements enthält.
Notiz: Das „CSSStyleDeclaration“-Objekt enthält die im Kopfabschnitt definierten CSS-Stilattribute.
Syntax (Legen Sie eine Stileigenschaft fest)
Element. Stil . Eigentum = WertGemäß der obigen Syntax ist das „ Stil „Eigenschaft unterstützt nur einen Parameter“ Wert ”, das den Wert der angegebenen Stileigenschaft darstellt.
Syntax (Eine Stileigenschaft zurückgeben)
Element. Stil . EigentumLassen Sie uns die oben besprochenen Syntaxen der „style“-Eigenschaft praktisch umsetzen.
Beispiel 1: Verwenden Sie die Eigenschaft „style“, um die Farbe eines bestimmten HTML-Elements festzulegen
In diesem Beispiel wird die grundlegende Syntax von „ Stil ”-Eigenschaft, um den Wert der „style“-Eigenschaft so festzulegen, dass die Farbe des jeweiligen HTML-Elements geändert wird.
HTML Quelltext
Gehen Sie zunächst den angegebenen HTML-Code durch:
< h2 > Verwenden Sie die style-Eigenschaft in JavaScript h2 >
< h3-ID = „H3“ > Zweiter Untertitel. h3 >
In den obigen Codezeilen:
- Der ' „HTML-Tag gibt die erste Unterüberschrift an.
- Der ' Das Tag „erstellt die zweite Unterüberschrift der Ebene 3 mit der zugewiesenen ID „H3“.
JavaScript-Code
Folgen Sie als Nächstes dem angegebenen JavaScript-Code:
< Skript >dokumentieren. getElementById ( „H3“ ) . Stil . Farbe = 'Grün' ;
Skript >
Im obigen Codeausschnitt ist das „ document.getElementById() ”-Methode greift auf die enthaltene „ „Element über seine ID“ H3 ” um das angegebene „ Farbe Attributwert des Elements über den „ Stil.Farbe ' Eigentum.
Ausgang
Die Ausgabe zeigt, dass die visuelle Darstellung des angestrebten HTML-Elements mithilfe der Eigenschaft „style“ entsprechend festgelegt wird.
Beispiel 2: Verwenden Sie die Eigenschaft „style“, um den Wert des angewendeten Attributs „style“ abzurufen
In diesem Beispiel hilft die „style“-Eigenschaft dabei, das zugewiesene „style“-Attribut des HTML-Elements mithilfe seiner verallgemeinerten Syntax (Rückgabe einer style-Eigenschaft) herauszufinden.
HTML Quelltext
Der HTML-Code ist hier angegeben:
< h2 > Verwenden Sie die style-Eigenschaft in JavaScript h2 >< h3-ID = „H3“ Stil = „Hintergrundfarbe:orange;“ > Der Wert der Hintergrundfarbe der zweiten Unterüberschrift ist : h3 >
< h4-ID = 'Demo' > h4 >
In diesem Code:
- Der ' Das HTML-Tag verwendet das Attribut „style“, das die Hintergrundfarbe des HTML-Elements „
“ festlegt.
- Der ' „Tag erstellt eine leere Unterüberschrift der Ebene 4 mit einer ID“ Demo “.
JavaScript-Code
Schauen Sie sich nun den angegebenen JavaScript-Code an:
< Skript >const Wert = dokumentieren. getElementById ( „H3“ ) . Stil . Hintergrundfarbe ;
dokumentieren. getElementById ( 'Demo' ) . innerHTML = Wert ;
Skript >
Im oben geschriebenen Code:
- Die Variable ' Wert ” wird mit einem „ deklariert const „Schlüsselwort, das das „“ anwendet document.getElementById() ”-Methode zum Abrufen des „
“-Elements mithilfe seiner ID, um den Wert des angewendeten „style“-Attributs abzurufen und ihn über die „style“-Eigenschaft auf das Element anzuwenden, d. h. „
“.
- Die Methode „document.getElementById()“ wird erneut verwendet, um auf das hinzugefügte leere „
“-Element zuzugreifen und den Wert des zugewiesenen „style“-Attributs für das abgerufene HTML-Element anzuzeigen und ihn als Unterüberschrift über die „ innerHTML ' Eigentum.
Ausgang
Die Ausgabe wendet die Hintergrundfarbe auf das Element an und der Wert des festgelegten „style“-Attributs wird ebenfalls entsprechend zurückgegeben.
Abschluss
JavaScript verwendet das „ Stil ”-Eigenschaft zum Zuweisen und Zurückgeben der Inline-„Stil“-Eigenschaften des HTML-DOM-Elements. Es bedarf eines zusätzlichen „Wertes“, um die gewünschte Funktionalität entsprechend anzuwenden. Neben dem Setzen und Abrufen ist es auch sinnvoll, das vorhandene „Style“-Attribut zu ändern. Dieser Leitfaden demonstrierte das Hauptziel, die Funktionsweise und die praktische Implementierung der HTML-DOM-Element-Stileigenschaft.