JavaScript Style Objekt (CSS und JavaScript)

Mit dem JavaScript-Objekt Style ist es möglich auf die HTML-Formatierung einzelner HTML-Elemente eines HTML-Documents zuzugreifen. Angesiedelt ist das Style-Objekt unterhalb eines jeden HTML-Elementknotens. Auf einzelne Elementknoten kann mittels des Objekts all, welches in der JavaScript-Objekthierarchie unter dem Document-Objekt liegt und in dem alle Elemente eines HTML-Dokuments gespeichert sind, zugegriffen werden. Über Style werden die CSS-Eigenschaften von Elementen – das Stylesheet – eines HTML-Dokuments manipuliert oder ausgelesen. Es besteht also die Möglichkeit lesend, wie auch schreibend auf die einzelnen CSS-Attribute der HTML-Elemente zuzugreifen. Somit ist es nicht nur möglich, CSS-Eigenschaften von Elementen zu ermitteln, sondern auch diese zu manipulieren und damit das Layout umzuformatieren. Bitte beachten Sie hierzu unsere JavaScript Style Beispiele mit kommentiertem Quellcode.

Zugegriffen wird auf die Styles von HTML-Elementen meist unter Verwendung des Document Object Model (DOM) aber auch über das all-Objekt kann der Zugriff erfolgen. Für den Zugriff per DOM gilt es zunächst den entsprechenden Elementknoten, welcher abgefragt oder manipuliert werden soll, zu ermitteln. Zu diesem Zweck greift man auf einige Methoden des Document-Objekts zurück. Dabei handelt es sich um die Methoden getElementById(), getElementByName() und getElementByTagName(). Die beiden letzteren liefern ein Array, das die Elemente enthält, welche den gewünschten Namen tragen bzw. alle Elemente dieses Tag-Typs. GetelementById liefert den ersten Knoten, mit der angegebenen ID – so ein solcher definiert wurde.

Auf die so ermittelten Elemente kann nun zugegriffen werden. Der Zugriff auf die CSS-Attribute erfolgt nun über das unter dem Element angesiedelte Style-Objekt. Die jeweiligen Attribute werden über Element-Objekt.style.Attribut angesprochen. Das Attribut wird über seinen Namen selektiert. So wird zum Beispiel das CSS-Attribut border mit Element-Objekt.style.border angesprochen. Im Unterschied zu normalen Stylesheet-Angaben im CSS-Bereich gilt für die Adressierung der CSS-Attribute, welche einen Bindestrich enthalten die Regel, dass der Bindestrich weggelassen und der darauf folgende Buchstabe groß geschrieben wird. Beispielsweise wird das CSS-Attribut font-size über Element-Objekt.style.fontSize angesprochen.

Wenn das all-Objekt als Ansatzpunkt verwendet werden soll, gibt es zwei Möglichkeiten einzelne Elemente anzusprechen: Soll über den Elementnamen bzw. die Element-ID selektiert werden, so muss dabei der Name / die ID des entsprechenden Elements und die anzusprechende Eigenschaft in der Form document.all.ElementName/ID.style.CSS-Attribut verwendet werden. Dies setzt selbstverständlich voraus, dass die jeweiligen Elemente auch unter der entsprechenden ID bzw. dem entsprechenden Namen definiert sind. Die zweite Möglichkeit ist die Selektion auf Basis des HTML-Tags. Hier nutzt man den Tag-Namen zur Selektion und wählt das Element über seinen Index aus. In diesem Falle wird man mit einem Aufruf der Form document.all.tags("Tag-Name")[Index].style die entsprechende CSS-Eigenschaft erreichen.

Auch bietet das Style-Objekt drei Methoden, mit deren Hilfe der Zugriff auf einzelne CSS-Eigenschaften möglich ist. Diese sind im Einzelnen: Die Methode getAttribute, mit der ein einzelnes Attribut, dessen Name der Methode als Parameter übergeben wird, abgefragt werden kann. Weiterhin die Methode setAttribute, die zum Setzen des Attributwertes auf einen bestimmten Wert dient – auch hier wird der Name des Attributs und darüber hinaus der zu setzende Attributwert für das Attribut übergeben. Als letzte im Bunde gibt es noch die Methode removeAttribute, die zum Entfernen eines als Parameter angegebenen Attributs dient.

Werte der jeweiligen CSS-Eigenschaft werden als Zeichenkette zugewiesen – handelt es sich bei einem Style um eine numerische Angabe, so kann diese auch mit einem numerischen Wert angegeben werden; dieser wird automatisch in ein String umgewandelt. Der Browser reagiert auf eine Zuweisung umgehend mit der Anpassung des Layouts auf den zugewiesenen Style.

Sie sollten allerdings stets den Weg über das DOM wählen, da diese Vorgehensweise – im Gegensatz zur all-Variante – Standardkonform ist. Das all-Objekt ist ursprünglich ein proprietäres Objekt der Firma Microsoft, welches im Internet Explorer seit Version 4.0 im Zuge der Entwicklung von JScript – einem JavaScript-Derivat von Microsoft – integriert ist. Obwohl es seit längerem auch unter anderen Browsern zumindest partiell unterstützt wird sollte es nicht verwendet werden, da es nicht zum offiziellen JavaScript-Standard gehört.

weiter zu Seite 2 3 »