HTML 5: Per JavaScript auf aktive CSS-Eigenschaften von Stylesheets zugreifen

Per JavaScript auf CSS-Eigenschaften zuzugreifen, die innerhalb eines Elementes per STYLE-Attribut – sogenannte Inline-Styles – ausgezeichnet sind, ist keine große Sache. Dafür gibt es die entsprechende JavaScript-Eigenschaft „style“. CSS-Eigenschaften, die über interne oder externe Stylesheets – beispielsweise über Klassen oder IDs – zugewiesen sind, lassen sich mit dieser Eigenschaft jedoch nicht abfragen. Hierfür gibt es die relativ neue Methode „getComputedStyle()“.

Alle aktiven CSS-Eigenschaften eines Elementes auslesen

Das Besondere an „getComputedStyle()“ ist nicht nur, dass es alle aktiven CSS-Eigenschaften eines Elementes ausliest, die per Stylesheets und als Inline-Styles zugewiesen sind, sondern auch die vom Browser angewendeten Standard-Eigenschaften.

var body_styles = window.getComputedStyle(document.getElementsByTagName("body")[0]);

Im Beispiel werden per „getComputedStyle()“ die CSS-Eigenschaften abgerufen, die dem BODY-Element zugewiesen wurden. Dazu gehören sowohl Inline-Styles als auch jene CSS-Eigenschaften, die über Stylesheets per Element, Klasse oder ID definiert wurden. Alle CSS-Eigenschaften werden als Objekt der Variablen „body_styles“ übergeben.

Mit „getPropertyValue()“ kann auf die einzelnen Eigenschaften zugegriffen werden.

var body_styles_margin = body_styles.getProperty("margin");

Im Beispiel wird der Wert für die CSS-Eigenschaft „margin“ ausgegeben. Ist für das BODY-Element keine Angabe für „margin“ gemacht worden, wird beispielswiese im Chrome „8px“ ausgegeben, da dies der vom Browser verwendete Standardwert ist.

Außerdem werden Werte nicht unbedingt so wiedergegeben, wie sie in den Stylesheets definiert sind. Wird eine Farbe über einen Namen wie „blue“ definiert, liest „getPropertyValue()“ den Wert als RGB-Farbe in der Form „rgb(0, 0, 255)“ aus. Sind CSS-Eigenschaften mit Vendor-Präfix angegeben, wird „getPropertyValue()“ nur die vom Browser verwendete Variante ausgeben.

Auch der Wert „auto“, der beispielsweise bei Breiten- und Höhenangeben verwendet wird, wird in dieser Form nicht ausgegeben. Die Methode „getPropertyValue()“ wird den tatsächlichen numerischen Wert wiedergeben. Wird also für ein Element die Höhe auf „auto“ gesetzt, liest „getPropertyValue()“ die tatsächlich Höhe des Elementes in Pixel aus.

Während man es in JavaScript gewohnt ist, die Bezeichnung von CSS-Eigenschaften ohne Bindestrich zu schreiben („backgroundColor“ statt „background-color“), erwartet „getProperty()“ die CSS-konforme Schreibweise.

var body_styles_backgroundcolor = body_styles.getProperty("background-color");

Alternativ kann statt „getProperty()“ auch eine verkürzte Schreibweise verwendet werden. Dazu wird die JavaScript-konforme Schreibweise der CSS-Eigenschaften einfach an die Methode „getComputedStyle()“ gehängt.

var body_styles_backgroundcolor = body_styles.backgroundColor;

Zugriff auch auf CSS-Eigenschaften von Pseudoelementen

Als optionaler zweiter Parameter kann „getComputedStyle()“ noch ein Pseudoelement übergeben werden. Somit können dann auch die Styles von beispielweise „p::after“ abgefragt werden.

var p_after_styles = window.getComputedStyle(document.getElementsByTagName("p")[0], "::after");

Für Pseudoklassen wie „:hover“ hingeben gibt es keine Möglichkeit, die CSS-Eigenschaften abzufragen. Während mittlerweile alle Browser (einschließlich des Internet Explorers 9) die CSS-Eigenschaften von normalen Elementen abfragen können, können Internet Explorer und Opera Pseudoelemente derzeit noch nicht auslesen.

Firefox Only: Standard-Stylesheets abfragen

Während „getComputedStyle()“ immer die aktiven CSS-Eigenschaften eines Elementes wiedergibt, lassen sich mit „getDefaultComputedStyle()“ die Standard-CSS-Eigenschaften abfragen – also jene Eigenschaften, die vom Browser verwendet werden, wenn nichts anderes vorgegeben wurde.

var body_styles_default = window.getDefaultComputedStyle(document.getElementsByTagName("body")[0]);

Der Variablen „body_styles_default“ werden im Beispiel somit die CSS-Eigenschaften des BODY-Elementes zugewiesen, die der Browser als Standardwerte verwendet. Dabei spielt es keine Rolle, ob diese Werte über andere Eigenschaften eines Stylesheets oder eines Inline-Styles überschrieben wurden.

Die Methode „getDefaultComputedStyle()“ gibt somit nicht zwingend das aktuelle Aussehen eines Elementes wieder, sondern das Aussehen, was aktiv wäre, wenn alle Stylesheets und Inline-Styles ausgeschaltet wären.

Derzeit unterstützt nur Firefox die Methode „getDefaultComputedStyle()“.