CSS, HTML und Javascript mit {stil}

Javascript getComputedStyle

get Computed Style: Abfrage auf externes CSS + style-Tag + inline CSS

window.getComputedStyle liest die endgültigen berechneten CSS-Eigenschaften eines Elements aus. Wenn Stile aus verschiedenen Quellen auf ein Element wirken (inline CSS, Stile aus CSS-Dateien, CSS im style-Tag …) oder sich der Zustand eines Elements durch Benutzeraktionen ändert, helfen die klassischen Abfragen wie elem.style und elem.getAttribute() nicht weiter.

elem.style und getAttribute sind elementare Methoden, um CSS-Eigenschaften eines Elements auszulesen. Aber elem.style als auch elem.getAttribute("style") lesen nur CSS-Eigenschaften, die mit dem style-Attribut des HTML-Tags eingesetzt wurden und haben keinen Zugriff auf komplexe Selektoren wie a:hover oder h2 em – eine herbe Einschränkung.

getComputedStyle und getPropertyValue()

window.getComputedStyle() hingegen gibt alle CSS-Eigenschaften eines Elements zurück – nachdem Eigenschaften aus CSS-Dateien, aus dem style-Tag und inline-CSS angwendet wurden.

var properties = window.getComputedStyle (elem, status);

getComputedStyle() hat zwei Parameter

  • das gefragte Element
  • optional: Name eines Pseudoelements ('before', 'after', 'first-line') oder null für das Objekt selbst.

Ohne weitere Einschränkung gibt getComputedStyle eine CSSStyleDeclaration zurück – eine erschöpfende Liste von Eigenschaft-Wert-Paaren. getPropertyValue() beschränkt die Ausgabe auf den Wert einer speziellen Eigenschaft.

Beispiel getComputedStyle

<style>
.circle { border: 4px solid rgb(180, 180, 180)  }
#c1 { border: 4px solid rgb(190, 23, 41) }
#c3 { border: 4px solid rgb(20, 180, 180) }
#c4 { border: 4px solid rgb(128, 161, 4) }
</style>
…
<div class="circle" id="c1" style="border-color: rgb(0,0,255); opacity: 0.5"></div>
<div class="circle" id="c2" style="border-color: rgb(0,0,0)"></div>
<div class="circle" id="c3"></div>
<div class="circle" id="c4"></div>
var c1 = window.getComputedStyle(
      document.querySelector("#c1")).getPropertyValue('border-right-color');
…
getComputedStyle zeigt

Während Chrome und Safari den vollen Satz von Eigenschaften zurückgeben, wenn getPropertyValue mit einer Kurzfassung wie border-color aufgerufen werden, liefern Firefox und Internet Explorer nur den Wert einer voll ausgeschriebenen Eigenschaft.

getPropertyValue('border')

4px solid rgb(190, 23, 41)

Firefox und IE geben einen leeren String zurück.

getPropertyValue('border-right-color')

rgb(190, 23, 41)

Funktioniert in allen Browsern

getComputedStyle().getPropertyValue("border")

CSS-Stil von Pseudo-Elementen auslesen

Der zweite (optionale) Parameter von getComputedStyle richtet sich an Pseudo-Elemente wie before, after, first-line.

Mein Produkt
<div class="elem">Mein Produkt</div>
.elem:after { content: " Neu "; color: orange; }




<script>
   var color = window.getComputedStyle (
      document.querySelector(".elem"), ":after"
   ).getPropertyValue("color");
   document.querySelector(".result").textContent = color;
</script>

Welche CSS-Stile unterstützt der Browser?

Bei einer allgemeinen Abfrage wie z.B. window.getComputedStyle(body) springen rund 250 CSS-Eigenschaften heraus, die das Element ertragen muss, darunter auch die CSS-Eigenschaften, die nur mit dem Browser-Präfix erreicht werden.

<script>
var elem = document.querySelector('body');
var styleList = document.getElementById('styleList');
var styles = window.getComputedStyle(elem);

if (window.getComputedStyle) {
   for (var i=0; i<styles.length; i++) {
      var val = styles[i];
      styleList.innerHTML += i + ' ' + val + ' ' + 
                             window.getComputedStyle(elem).getPropertyValue(val) + ' <br>';
   }

} else if (elem.currentStyle) {
   styleList.innerHTML = 'getComputedStyle wird von IE erst ab Version 9 unterstützt';
}
</script>

Alternative: cssRule()

Auf alle gelinkte und eingebetteten Stylesheets kann durch das Array document.styleSheets zugegriffen werden.

cssRule() kann eine vollständige CSS-Regel oder einzelne Eigenschaften einer CSS-Regel auslesen und ändern, bevor die HTML-Elemente existieren. Damit macht Javascript ein anfängliches Verhalten für den Besucher unsichtbar und vermeidet das Zappeln zu Beginn des Scripts.

cssRule (target, attribute, value)

target ist ein String, der die angesprochene CSS-Regel enthält, z.B.

  • h2 für <h2>-Tags
  • #id für Elemente mit der ID id
  • .class für Elemente der Klasse class

Der Parameter attribute ist optional.

Der Parameter value ist optional und ändert die Regel oder Eigenschaft.

cssRule ('p', '', '');
cssRule ('#content', '', 'border: 4px solid green;');

CSS-Stile auslesen

Das Auslesen einer finalen gerenderten CSS-Eigenschaft kommt nicht so häufig vor wie das Ändern von Stilen, aber Javascript stellt vier Methoden zur Verfügung, um das CSS eines Elements auszulesen: elem.style, getAttribute('style'), getComputedStyle und cssRule().

elem.style

Auslesen und Ändern des style-Attributs eines HTML-Elements

elem.style.color = "red";

elem.getAttribute

Die Methoden getAttribute() und setAttribute() von HTML-Elementen

elem.getAttribute("style");

window.getComputedStyle(elem)

getComputedStyle(elem, prop)

Style-Element cssRule()

Die Funktion cssRule() aus der Level 2 Style Specification

cssRule (target, attribute, value)

getComputedStyle wird von allen modernen Browsern und IE ab Verion 9 unterstützt.

Am Rande: Für uralte Internet Explorer (IE6, IE7 und IE8) gibt es eine Alternative – currentStyle(). getCurrentStyle gibt den Stil für das aktuelle Element zurück. currentStyle gibt nur den Stil für das Element selbst zurück.

if (window.getComputedStyle) {
	width = window.getComputedStyle(elem, null).width;
} else if (elem.currentStyle) {
	width = elem.currentStyle.width;
}
getComputedStyle