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 Element.style kann nur bestehende CSS-Werte überschreiben. Mit getDefaultComputedStyle können Sie die Browser-Grundeinstellungen auslesen. window.getComputedStyle erfasst die tatsächlichen Eigenschaften.


bei Pseudo-Elementen[Bearbeiten]

Sie können getComputedStyle() auch für Pseudoelemente benutzen, wenn sie zum Parameter des Elementobjekts ein durch ein Leerzeichen getrennten zweiten Parameter (after, before,etc) angeben.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]