In diesem Beitrag werden Ziel, Funktionsweise und Verwendung der Methode „getComputedStyle()“ des Fensterobjekts in JavaScript erläutert.
Was macht die Methode „getComputedStyle()“ des Window-Objekts in JavaScript?
Der ' getComputedStyle() Die Methode gibt das Objekt „CSSStyleDeclaration“ zurück, das eine Sammlung der CSS-Eigenschaften und ihrer Werte enthält. Es berechnet die Stileigenschaften des Ziel-HTML-Elements. Darüber hinaus spielt es auch eine wichtige Rolle bei der Berechnung der Stileigenschaften des spezifischen Teils des HTML-Elements.
Syntax
Fenster. getComputedStyle ( Element , pseudoElement )
In der obigen Syntax:
- Fenster: Es ist das globale Objekt, das das Browserfenster darstellt.
- Element: Es gibt das bestimmte HTML-Element an, dessen Stil berechnet werden muss.
- pseudoElement: Es bezieht sich auf den Teil des angegebenen HTML-Elements, z. B. erster Buchstabe, letzter Buchstabe usw.
Im folgenden Abschnitt erfolgt die praktische Veranschaulichung der Methode „getComputedStyle()“ anhand von Beispielen.
HTML-Code (einschließlich CSS-Styling)
Verschaffen Sie sich zunächst einen Überblick über den folgenden HTML-Code:
< Kopf >
< Stil >
h3{
Schriftgröße: 20px;
Hintergrundfarbe: grüngelb
}
< / Stil >
< / Kopf >
< Körper >
< h2 > Verwenden Sie die Methode getComputedStyle() des Fensterobjekts < / h2 >
< h3 Ausweis = 'Demo' > Die Schriftgröße des angegebenen HTML-Elements beträgt: < / h3 >
< P Ausweis = 'Probe' >< / P >
In den obigen Codezeilen:
- Der '
„Tag wendet den angegebenen Stil des „ ” HTML-Element. - Im '
Im Abschnitt „ ” - Als nächstes das „
“-Element mit der ID „ Demo „ gibt eine zweite Unterüberschrift an.
- Schließlich ist das „ „Tag bezieht sich auf einen leeren Absatz mit einer ID“ Probe ” zum Anzeigen der berechneten CSS-Eigenschaften des Zielelements.
Notiz: Dieser HTML-Code wird in allen genannten Beispielen dieses Beitrags befolgt.
Beispiel 1: Anwenden der Methode „getComputedStyle()“ zur Berechnung der Schriftgröße des HTML-Elements
In diesem Beispiel wird die Methode „getComputedStyle()“ angewendet, um die Schriftgröße des Ziel-HTML-Elements abzurufen.
JavaScript-Code
Betrachten Sie den angegebenen JavaScript-Code:
< Skript >const Element = dokumentieren. getElementById ( 'Demo' ) ;
const obj = Fenster. getComputedStyle ( Element )
Größe lassen = obj. getPropertyValue ( 'Schriftgröße' ) ;
dokumentieren. getElementById ( 'Probe' ) . innerHTML = Größe ;
Skript >
Im obigen Codeausschnitt:
- Deklarieren Sie eine Variable „ Element ” mit einem „const“-Schlüsselwort, das das „ getElementById() „Methode zum Zugriff auf das „
“-Element über seine ID „ Demo “.
- Wenden Sie danach „ getComputedStyle() ”-Methode zur Berechnung der CSS-Eigenschaften des abgerufenen „
“-Elements.
- Als nächstes wird das „ Größe Die Variable „wendet“ an: getPropertyValue() „Methode, die den Wert der angewendeten CSS-Eigenschaft zurückgibt“ Schriftgröße ” als Zeichenfolge.
- Zuletzt greift die Methode „getElementById()“ auf den leeren Absatz zu und zeigt den berechneten CSS-Eigenschaftswert mithilfe der „ innerHTML ' Eigentum.
Ausgang
Wie Sie sehen, zeigt die Ausgabe den angewendeten Schriftgrößenwert für das entsprechende HTML-Element an, d. h. „
“.
Beispiel 2: Anwenden der Methode „getComputedStyle()“ zur Berechnung der Hintergrundfarbe des HTML-Elements
In diesem Beispiel wird die besprochene Methode verwendet, um die Hintergrundfarbe des spezifischen HTML-Elements zu berechnen:
< Skript >const Element = dokumentieren. getElementById ( 'Demo' ) ;
const obj = Fenster. getComputedStyle ( Element )
lass bgcolor = obj. getPropertyValue ( 'Hintergrundfarbe' ) ;
dokumentieren. getElementById ( 'Probe' ) . innerHTML = bgcolor ;
Skript >
Im obigen Codeblock ist das „ getComputedStyle() Die Methode berechnet die „ Hintergrundfarbe ” des „
“-Elements, dessen ID „demo“ ist, und seinen Wert als „rgb“ über das „ zurückgibt getPropertyValue() ' Methode.
Ausgang
Die Ausgabe zeigt deutlich die berechnete Hintergrundfarbe des abgerufenen HTML-Elements.
Abschluss
JavaScript bietet die „ getComputedStyle() ”-Methode zur Berechnung der CSS-Stileigenschaften des Ziel-HTML-Elements. Der berechnete Wert dieser Methode ist eine Zeichenfolge, die die CSS-Eigenschaften und ihre Werte enthält. Es kann auf unterschiedliche Weise mithilfe von JavaScript implementiert werden, um die CSS-Eigenschaften eines beliebigen HTML-Elements abzurufen. Dieser Beitrag lieferte einen detaillierten Überblick über das Ziel, die Funktionsweise und die Verwendung der Methode „getComputedStyle()“ des Fensterobjekts in JavaScript.