Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » JavaScript & jQuery » HTML 5: Per JavaScript auf aktive CSS-Eigenschaften von Stylesheets zugreifen

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 3 Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 2. Januar 2014

Inhaltsverzeichnis

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

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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Coco logo.

COCO Content Marketing

München

Rocket Backlinks Logo.

Rocket Backlinks

Aalen

Khoa Nguyen SEO München Logo

Khoa Nguyen – Online Marketing Freelancer

München

Trend Maker Marketing Agentur Regensburg Logo

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

Sparkman webdesign Frankfurt.

Webdesign Frankfurt | Sparkm4n

Dillenburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑