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

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiel

Beispiel ansehen …
function GetBGColor (button) {
  if (window.getComputedStyle) {
    var compStyle = window.getComputedStyle (button, "");  // für alle modernen Browser
  }
  else {
    var compStyle = button.currentStyle;                   // für IE 8
  }
  alert (compStyle.backgroundColor);
}

Durch einen Klick auf den Button wird die Hintergrundfarbe des Buttons ausgelesen. Als Fallback für den Internet Explorer 6-8 wird die Eigenschaft currentStyle verwendet. 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.


[Bearbeiten] bei Pseudo-Elementen

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.

[Bearbeiten] Siehe auch

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML