CSS, HTML und Javascript mit {stil}

Javascript getComputedStyle

Computed Style: Externes CSS + style-Tag + inline CSS

elem.style, getAttribute und setAttribute sind die elementaren Methoden, um die CSS-Eigenschaften eines Elements auszulesen bzw. zu setzen. Aber sowohl elem.style als auch elem.getAttribute("style") lesen nur die CSS-Eigenschaften, die mit dem style-Attribut des HTML-Tags eingesetzt wurden – eine herbe Einschränkung.

Javascript getComputedStyle gibt die endgültigen berechneten CSS-Eigenschaften eines Elements zurück – nützlich, wenn Stile aus verschiedenen Quellen (inline CSS, Stile aus CSS-Dateien, CSS im style-Tag …) auf ein Element wirken.

Damit stehen vier Verfahren zur Verfügung, um das CSS eines Elements auszulesen und zu ändern: elem.style, getAttribute('style'), getComputedStyle und cssRule().

elem.style

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

elem.style.color = "red";

getAttribute / setAttribute

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

elem.setAttribute("style", "color: red; border-bottom-width: 4px; padding-bottom: 8px;");

getComputedStyle

getComputedStyle(elem, prop)

Style-Element cssRule()

Die Funktion cssRule() aus der Level 2 Style Specification

cssRule (target, attribute, value)

elem.style

elem.style ist die ältere Fassung von elem.getAttribute("style").

elem.style greift auf individuelle CSS-Eigenschaften zu und kann sie sowohl lesen als auch setzen.

Die Eigenschaften werden dabei in camelCase geschrieben: ohne Bindestrich, Wörter nach einem Bindestrichen beginnen mit einem Großbuchstaben.

elem.style.borderColor = "blue";
anstelle von 
elem.setAttribute ("style", "border-color: blue");

elem.style.borderBottomWidth = "4px";
anstelle von elem.style.setAttriubte ("style", "border-bottom-width: 4px");

getComputedStyle vs elem.style

elem.style ändert CSS, das über eine CSS-Datei oder ein style-Tag notiert ist. Javascript style kann aber keine Regeln aus einer CSS-Datei und auch nicht aus einem style-Tag im head der HTML-Seite lesen und nicht auf Selektoren wie a:hover, p span oder div#myStyle zugreifen.

getComputedStyle hingegen greift auf Pseudo-Klassen und Pseudo-Selektoren wie a:hover, div:last-child und li:nth-child zu und kann p span und div#myStyle lesen und ändern.

	elem.style.borderBottomColor = 'navy';
	elem.style.borderBottomWidth = '4px';
	elem.style.paddingBottom = '8px';
	elem.style.color = navy;

2: getAttribute() / setAttribute()

getAttribute und setAttribute erfüllen denselben Zweck wie elem.style, sind aber konsistenter und intuitiver.

var headers = document.getElementsByTagName('h2');
for (var i=0; i<headers.length; i++) {
    headers[i].setAttribute('style', 
        'border-bottom-color: navy; 
        border-bottom-width: 4px; 
        padding-bottom: 8px; 
        color: navy;');
}

Sowohl elem.style als auch getAttribute() bzw. setAttribute() lesen / erzeugen Inline-Stile (als wäre das style-Attribut im HTML-Tag notiert) und haben keinen Zugriff auf komplexe Selektoren wie a:hover oder h2 em.

3: getComputedStyle(elem, null)

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

  • das gefragte Element
  • optional: Name eines Pseudoelements ('before', 'after', 'first-line') oder null für das Objekt selbst.
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 +=
         window.getComputedStyle(elem).getPropertyValue(val);
   }
}

Bei einer allgemeinen Abfrage wie hier 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.

Unterstützt von allen modernen Browsern und IE ab Verion 9

Internet Explorer offerierte für IE6, IE7 und IE8 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;
}

Beispiel getComputedStyle

Irgendwann braucht man die CSS-Werte, mit denen ein Element aktuell im Browser gerendert wird. Die einfachste Methode wäre elem.style, wirkt aber nur bei inline-Stilen. elem.getAttribute() hilft ebenfalls nicht, wenn die Eigenschaft aus unterschiedlichen Quellen rührt – CSS-Datei, style-Tag im Kopf des Dokuments, inline-CSS.

getComputedStyle bringt dann den Mix aus allen Quellen zusammen.

<style>
.circle { width: 45px; height: 45px; border-radius: 50% }
#c1 { border: 4px solid silver }
</style>
…
<div class="circle" id="c1" style="border-color: #BE1729"></div>
getComputedStyle zeigt

function getStyle (elem, strCssRule) {
   var strValue = "";
   if(document.defaultView && document.defaultView.getComputedStyle) {
      strValue = window.getComputedStyle(elem, "").getPropertyValue(strCssRule);
   }
   else if (elem.currentStyle) { // IE 8 und älter
      strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
         return p1.toUpperCase();
      });
      strValue = elem.currentStyle[strCssRule];
   }
   return strValue;
}

var c1 = getStyle(document.querySelector("#c1"), "border-right-color");

Das Auslesen einer finalen gerenderten CSS-Eigenschaft kommt nicht so häufig vor wie das Ändern von Stilen. Während Chrome und Safari den vollen Satz von Eigenschaften zurückgeben, wenn getPropertyValue mit einer Kurzfassung wie border aufgerufen werden, liefern Firefox und Internet Explorer nur den Wert einer voll ausgeschriebenen Eigenschaft.

Ein Beispiel:

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

4: 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;');