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()
“.