CSS und JavaScript

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Wenn man XHTML, JavaScript und CSS miteinander kombiniert, erhält man etwas, das als dynamisches HTML oder auch DHTML bezeichnet wird. Viele halten DHTML für eine eigenständige Technologie – fälschlicherweise, denn es ist lediglich ein Begriff, der auf das hohe Potenzial an Interaktivität und Dynamik von Webseiten in (X)HTML hinweist.

Über DHTML wurden schon viele Bücher geschrieben, unter anderem DHTML Utopia: Modern Web Design Using JavaScript & DOM, das von Stewart Langridge geschrieben und bei SitePiont publiziert wurde.

Ich verzichte darauf, Ihnen an dieser Stelle auch noch JavaScript oder DHTML beizubringen, da beide Themenbereiche viel zu groß sind für dieses Buch. Ich möchte es bei einem kurzen Überblick belassen, um Ihren Appetit anzuregen und bohrenden Fragen nach ihrer Einsetzbarkeit mit CSS zuvorzukommen.

Im Kern von DHTML befindet sich das Document Object Model (DOM). Der Vergleich ist zwar etwas vereinfachend, aber Sie können sich das DOM als Spezifikation oder Definition dafür vorstellen, wie Sie einzelne Elemente Ihrer Website ansprechen können. Das DOM erlaubt Ihnen, das Aussehen und Verhalten dieser Elemente zu verändern. JavaScript ist die Sprache, die in der Regel dafür benutzt wird, um diese Anweisungen zu formulieren.

Im Wesentlichen können Sie sich mit JavaScript auch auf jede CSS-Eigenschaft beziehen und sie verändern. Innerhalb des JavaScript-Codes sprechen Sie das Element einfach mit Namen oder ID an, nennen die Eigenschaft, die sie auslesen oder verändern möchten, und geben einen neuen Wert dafür an. Die Auswirkungen durch die veränderten Stylesheets treten ein, sobald das Skript ausgeführt wird.

So können Sie zum Beispiel einen Button auf einer Webseite erstellen, der einen bestimmten Teil Ihres Seiteninhalts (dessen ID ist im Beispiel schnell_weg) unsichtbar macht. Aktivieren können Sie ihn mit der JavaScript-Funktion hideShow. Das würde ungefähr so aussehen:

function hideShow() {
  document.getElementById("schnell_weg").style.visibility="hidden";
}

An welcher Stelle Sie dieses Skript definieren, wann und wie es ausgeführt wird sowie alle weiteren Details sollen hier nicht Thema sein. Es soll lediglich deutlich werden, dass Sie mit JavaScript den Stil von Elementen in einer HTML-Seite ansprechen und verändern können. Das ist sogar möglich, nachdem sich die Seite im Browser aufgebaut hat. Die Syntax dafür unterscheidet sich nur wenig von der in unserem Beispiel. Zunächst erscheint es mühsam, jedes Mal getElementByID eintippen zu müssen, wenn Sie den Stil eines Elements analysieren oder verändern wollen. Doch gerade weil der Operator für jede Instanz immer derselbe ist, können Sie umso schneller lernen, mit den vielen unterschiedlichen Scripting-Anforderungen fertig zu werden.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg