Meldung

06.08.2007 - CSS-Eigenschaften mit Hilfe von JavaScript ändern

Das vordefinierte JavaScript-Objekt Style ermöglicht dem Web-Entwickler den Zugriff auf das StyleSheet einzelner HTML-Elemente. Dabei ist gleichermaßen der Lesende, wie auch der Schreibende Zugriff auf die CSS-Eigenschaften des HTML-Elementknotens möglich. Beim Objekt Style handelt es sich um ein Kindobjekt eines JavaScript Elementknoten. Die HTML-Elemente eines HTML-Dokuments sind nach dem Document Object Model (DOM) in einem Elementenbaum gespeichert. Ein bestimmter Elementknoten kann – so dieser nicht per JavaScript erzeugt wurde, wodurch direkter Zugriff über den erzeugten Elementknoten erfolgen kann – über das Objekt Document ermittelt werden. Genauer gesagt mittels einer der Methoden getElementById, getElementsByName oder getElementsByTagName – letztere liefern statt einem einzelnen Elementknoten Arrays mit Elementknoten.

Neben dem direkten Zugriff auf die Eigenschaften mit dem Punkt-Operator bietet das Style-Objekt Methoden zum Lesen, Schreiben und Löschen von Attributwerten. Alle genannten Methoden erwarten zumindest einen Parameter vom Typ String, der den Namen des angesprochenen CSS-Attributes enthält. Darüber hinaus benötigt die Methode setAttribute noch den zu setzenden Attributwert. In den Beispielen werden einige Funktionen implementiert, die den Umgang mit dem Style-Objekt demonstrieren sollten. Dabei wird sowohl lesend als auch schreibend auf die StyleSheets von HTML-Elementen zugegriffen.

Alexander Müller