Denis Potschien 2. Januar 2014

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

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

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

js_getcomptedstyle

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

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

4 Kommentare

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

    var body_styles_margin = body_styles.getProperty(„margin“);

    Ich bin mir sicher sie meinten:
    var body_styles_margin = body_styles.getPropertyValue(„margin“);

  2. coole Sache, aber ich fürchte, dass nicht alle browser das problemlos darstellen. ich muss nur die browser meiner familie nehmen, da nutzen einige 3 Jahre alte Explorer.
    Und wenn ich mal wieder ein schönes Projekt fertig habe, sieht das bei denen nicht schön aus.

  3. Wirklich sehr guter und hilfreicher Artikel :) Wieder was gelernt.

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück