Stil mit {stil}

Apr 2008

DOM Level 2 Style

Das W3C präsentierte die Document Object Model (DOM) Level 2 Style Specification bereits im Jahr 2000, dennoch ist sie bedeutend weniger prominent als das Document-Objekt des DOM.

Die Style-Spezifikation ist die Schnittstelle zu den Stylesheets, die durch das STYLE- oder LINK-Element in das Dokument eingebunden werden und ergänzt die Methoden getAttribute() und setAttribut() des Element-Objekts der Core-Spezifikation bzw. das Style-Objekt der HTML Spezifikation.

DOM Style bringt also weitgreifende Techniken, um die Stylesheets, die über ein LINK- oder STYLE-Element in die Seite eingebunden sind, zu ändern.

Im Gegensatz zu den Attribut-Methoden des Element-Objekts und dem Style-Objekt, die nur einzelne Regeln und Kurzschriften setzen und wie Inlinestile wirken, greift das StyleSheet-Objekt auch auf Selektoren wie a:hover, p span oder div#myStyle zu, um sie zu lesen, zu manipulieren oder Selektoren zu ändern.

Methode 1 (HTML-Element): Das Style-Objekt der HTML-Spezifikation

Das Style-Objekt wurde ursprünglich von Microsoft eingeführt und erst in der Level 2 Style Specification zum Standard, ist aber in allen modernen Browsern zuverlässig und stabil implementiert.

Das Style-Objekt ist unvergleichlich intuitiv in der Anwendung und jedem Webdesigner durch die 1:1-Umsetzung der CSS-Eigenschaften direkt zugänglich: Man nehme eine CSS-Eigenschaft, streiche die Bindestriche in zusammengesetzen Bezeichnungen und schreibe stattdessen den ersten Buchstaben des zweiten Teils in Großbuchstaben.

Aus background-color wird backgroundColor und border-right-color wird zu borderRightColor.

var headers = document.getElementsByTagName('h2');
for (var i=0; i<headers.length; i++) {
	headers[i].style.borderBottomColor = "navy";
	headers[i].style.borderBottomWidth = "4px";
	headers[i].style.paddingBottom = "8px";
	headers[i].style.color = "navy";
}

Die Ausnahme ist die Eigenschaft float – da float in den meisten Programmiersprachen ein reserviertes Wort ist, heißt float entweder cssFloat oder styleFloat in Internet Explorer 6.

Diese Methode ist zwar einfach und sicher, allerdings enorm geschwätzig und bei der Änderung mehrerer Elemente auf einer Seite (siehe oben) auch sehr rechenintensiv. Mit der Eigenschaft elem.style.eigenschaft (z.B. elem.style.border) können dem nur CSS-Regeln zugewiesen oder geändert werden, wenn die CSS-Regeln durch das style-Attribut des HTML-Elements definiert oder per Javascript mit der style-Eigenschaft des Objekts gesetzt wurden.

<div id="myBox" style="border: 4px solid silver"> … </div>

Weiterhin ist es zwar auch möglich, die Klasse eines HTML-Elements zu ändern, aber auch dieses Verfahren kann erst durchgeführt werden, wenn das HTML-Element bereits existiert. Ein gravierender Nachteil dieser Beschränkung ist, dass der Benutzer die Seite erst im „ungescripteten“ Zustand und dann erst die Wirkung des Scripts sieht – eine unschöne Zappelei.

Methode 2 (HTML-Element): getAttribute() und setAttribute()

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;');
}

könnte denselben Zweck erfüllen wie die vier Anweisungen im vorangehenden Beispiel, wenn Internet Explorer 6 nicht ausgerechnet bei getAttribute('style', '…') / setAttribute('style', '…') verweigern würde.

Methode 3 (HTML-Element): getComputedStyle(elem, null)

Sowohl Methode 1 als auch Methode 2 erzeugen Inline-Stile, so als wäre das style-Attribut im HTML-Tag notiert. Das style-Attribut bietet keinen Zugriff auf differenzierte Selektoren wie a:hover oder h2 em.

<script type="text/javascript">
addEvent(window, 'load', initJsdomstylesF1);
function initJsdomstylesF1 ()
{
	var form = document.getElementById('jsdomstylesF1');
	form.onsubmit = getStyle;
}

function getStyle ()
{
	var elem = document.getElementById('content');
	var style = window.getComputedStyle(elem, null);
	// currentStyle
	var prop = style.getPropertyValue("width");
	alert("" + prop);
	return false;
}
</script>

getComputedStyle(elem, prop) hat zwei Parameter: eine Referenz auf das gefragte Element und der Name eines Pseudoelements ('before', 'after', 'first-line') oder null für das Objekt selbst.

Unterstützt von Firefox, Opera 7+ und Konqueror 3.5+ / Safari 3

Internet Explorer offeriert 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;
}

Methode 4 (Style-Element): cssRule()

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

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

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 Paramter attribute ist optional.

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

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

Mehr bei coding.binon.net