JavaScript/Window/getComputedStyle

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Methode Window.getComputedStyle() ermittelt die Werte aller CSS-Eigenschaften eines Elements, nachdem die Stylesheets geladen sind. Sie erwartet die Angabe eines Elementobjekts und gibt ein CSSStyleDeclaration-Objekt zurück.

  • DOM 2.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

Syntax

var style = window.getComputedStyle(element[, pseudoElt]);


  • element: das Element, dessen Stil ermittelt werden soll
  • PseutodElt: optionale Angabe eines Pseuodelements


Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
function getBackgroundColor (element) {
  return window.getComputedStyle(element).backgroundColor;
}

Durch einen Klick auf den Button wird die Hintergrundfarbe des Buttons ausgelesen. Als Ergebnis wird die Farbe rot nicht als Name, sondern als rgb-Wert zurückgegeben. In em oder Prozent angegebene Längenangaben werden in Pixel umgerechnet.

Beachten Sie: Die Eigenschaft style zeigt und verändert ausschließlich die CSS-Eigenschaften, die über das style-Attribut dieses Elements gesetzt werden. Eigenschaften, die aus Ihren Stylesheets oder den Browser-Grundeinstellungen stammen, sehen Sie damit nicht. Die Zusammenfassung aller gültigen CSS-Eigenschaften eines Elements, unter Berücksichtung aller Vorrangregeln, ist komplex und wird von window.getComputedStyle erledigt. Die reinen Browser-Grundeinstellungen können Sie mit getDefaultComputedStyle auslesen.


bei Pseudo-Elementen[Bearbeiten]

Sie können getComputedStyle() auch für Pseudoelemente benutzen, wenn Sie als zweiten Parameter den Namen des gewünschten Pseudoelements angeben. Die Browser verstehen hier die korrekte Version mit zwei Doppelpunkten und die veraltete Version mit einem Doppelpunkt.

Style eines Pseudoelements ermitteln
<style>
p::after {
   content: "selfhtml";
   color: #306f91;
}
</style>

<body>
   <p>Hallo </p>
   <script>
      let paragraph = document.querySelector("p");
      let pStyle = window.getComputedStyle(paragraph, "::after");
      console.log("Das ::after-Pseudoelement hat die Farbe " , pStyle.color);
   </script
</body>

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]