Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 17 DHTML und CSS
|  | 17.1 Grundlagen
|  | 17.2 Cascading Style Sheets
|  | 17.3 HTML-Elemente
|  | 17.4 Beispiele
|  |  | 17.4.1 Animiertes Logo
|  |  | 17.4.2 Sichtbar und unsichtbar
|  |  | 17.4.3 Neuer Mauszeiger
|  |  | 17.4.4 Permanentes Werbebanner
## 17.2 Cascading Style Sheets Die herkömmliche HTML-Programmierung war nicht immer besonders strukturiert. Wollte man in einer Tabelle alle Zellen in einer bestimmten Schrift darstellen, so musste man in jeder Zelle ein <font>-Tag verwenden. Mit dem Konzept der Cascading Style Sheets 1 (kurz CSS) kann sich das ändern. Ohne hier auf allzu viele Details eingehen zu wollen, sei nur gesagt: Es gibt immer wieder in der Fachpresse Vergleiche, welcher Browser in welchem Maße CSS unterstützt. Dabei schneidet der Netscape Navigator in der Regel am schlechtesten ab, der Internet Explorer schon etwas besser – und in Führung liegt die Nummer 3 auf dem Browser-Markt, der norwegische Opera-Browser. Ein Style Sheet sieht folgendermaßen aus:
    <style type="text/css"><!--
       a {color:blue; text-decoration:none}
    --></style>
Die HTML-Kommentare dienen auch hier dazu, dass ältere Browser den Text zwischen den <style>-Tags nicht anzeigen. Heutzutage ist das allerdings genauso relevant wie die HTML-Kommentare bei <script>-Tags: Sie schaden nicht, aber nützen nur begrenzt. Eigentlich interessant ist diese Zeile:
    a {color:blue; text-decoration:none}
Das bedeutet: Alle Links (Tag <a>) im Text werden in blauer Farbe angezeigt (color:blue) und nicht unterstrichen (text-decoration:none). Diese Angaben gelten global für das gesamte Dokument. Man kann jedoch diese Vorgaben auch überschreiben, indem bei einem Tag der style-Parameter gesetzt wird:
    <a href="http://www.galileo-press.de/" style="color:blue; text-decoration:none">Galileo Press</a>
Man kann natürlich nicht nur Links anpassen, sondern beispielsweise auch Absätze (Tag <p>) oder eben Tabellenzellen (Tag <td>):
    <style type="text/css"><!--
       p {color:green}
       td {font-size: 12pt}
    --></style>
Außerdem lassen sich CSS-Stilangaben nicht nur für Tags einrichten, sondern auch für IDs und für spezielle Klassen. Letzteres sieht beispielsweise folgendermaßen aus:
    <style type="text/css"><!--
       .gruen {color:green}
    --></style>
Alles auf der Seite, was die Klasse gruen hat, wird auch grün dargestellt. Die Klasse geben Sie mit dem class-Attribut an:
    <p class="gruen">Dieser Text ist nicht mehr schwarz ...</p>
JavaScript bietet nun mehrere Möglichkeiten, auf CSS-Formatierungen eines Elements zuzugreifen. Am einfachsten verwenden Sie die style-Eigenschaft des entsprechenden HTML-Elements, das Sie via DOM (siehe vorheriges Kapitel) »erreichen«. Sie müssen dann nur noch die zugehörige CSS-Eigenschaft in CamelCase umwandeln. Das bedeutet, dass jeder Wortbestandteil mit einem Großbuchstaben beginnt, aber die gesamte Eigenschaft mit einem Kleinbuchstaben anfängt. Aus der CSS-Eigenschaft color wird die JavaScript-Eigenschaft color, es ändert sich also nichts. Aus background-color wird backgroundColor, aus font-weight wird fontWeight. Bindestriche verschwinden also ebenfalls – sie sind ja so oder so nicht in JavaScript-Eigenschaften erlaubt. Das folgende Listing ändert die Vorder- und Hintergrundfarbe eines Textes auf Knopfdruck. Per document.getElementById() wird das <p>-Element angesprochen und dann style.<Eigenschaft> gesetzt. Hier klicken, um das Bild zu Vergrößern Abbildung 17.1 Der Text wird auf Mausklick invertiert.
    <html>
    <head>
    <title>CSS</title>
    <script type="text/javascript"><!--
    function normal() {
       var Absatz = document.getElementById("Absatz");
       Absatz.style.color = "black";
       Absatz.style.backgroundColor = "white";
    }

    function invers() {
       var Absatz = document.getElementById("Absatz");
       Absatz.style.color = "white";
       Absatz.style.backgroundColor = "black";
    }
    //--></script>
    </head>
    <body>
    <p id="Absatz">Text wechsle dich</p>
    <form>
       <input type="button" value="Normal" onclick="normal();" />
       <input type="button" value="Invers" onclick="invers();" />
    </form>
    </body>
    </html>
Ein häufig eingesetzter Effekt besteht darin, die CSS-Eigenschaft display zu setzen: Der Wert none beispielsweise blendet das dazugehörige Element ein oder aus; der davon belegte Platz wird freigegeben. Wenn Sie mit Klassen arbeiten, benötigen Sie die style-Eigenschaft nicht, lediglich className. Damit haben Sie Lese- und Schreibzugriff auf die CSS-Klasse des jeweiligen Elements. Hier noch einmal das Beispiel mit dem invertierten Text, diesmal via CSS-Klassen:
    <html>
    <head>
    <title>CSS</title>
    <style type="text/css"><!--
      .normal { color: black; background-color: white; }
      .invers { color: white; background-color: black; }
    --></style>
    <script type="text/javascript"><!--
    function setzeKlasse(klasse) {
       var Absatz = document.getElementById("Absatz");
       Absatz.className = klasse;
    }
    //--></script>
    </head>
    <body>
    <p id="Absatz">Text wechsle dich</p>
    <form>
       <input type="button" value="Normal"
          onclick="setzeKlasse('normal');" />
       <input type="button" value="Invers"
          onclick="setzeKlasse('invers');" />
    </form>
    </body>
    </html>
JavaScript bietet noch einen viel detaillierteren Zugriff auf CSS-Stile, was aber in der Praxis eher seltener zum Einsatz kommt. Aus diesem Grund finden Sie hier nur einen kurzen Ausblick, was noch möglich ist:
| Alle Stylesheets eines Dokuments (sowohl inline als auch externe Stile) stehen im Array document.styleSheets zur Verfügung. Mit der Eigenschaft disabled können sie aktiviert (false) und deaktiviert (true) werden.
| Alle einzelnen CSS-Anweisungen innerhalb eines Stylesheets stehen im Array cssRules (Mozilla) bzw. rules (Internet Explorer). Der Zugriff erfolgt also via document.styleSheets[x].cssRules bzw. document.styleSheets[x].rules. Der Zugriff dort funktioniert dann wie bei regulären CSS-Stilen über die style-Eigenschaft, beispielsweise mit document.styleSheets[x].cssRules[y].style.backgroundColor oder document.styleSheets[x].rules[y].style. backgroundColor.
Für den Praxiseinsatz genügen aber in den allermeisten Fällen die Zugriffsmöglichkeiten auf die spezifischen Stile oder, noch besser, auf die CSS-Klassen.
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> 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.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de