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.3 HTML-Elemente Der Begriff DOM ist Ihnen ja bereits im vorherigen Kapitel begegnet: Document Object Model, die hierarchische Anordnung der einzelnen HTML-Dokumente im document-Objekt. Alles, was in Tags eingeschlossen ist, ist ein Objekt, also beispielsweise auch kursiv gedruckter Text (<i>-Tag). Auf jedes dieser Objekte kann man zugreifen, und jedes dieser Objekte hat eine Menge von Eigenschaften. Prinzipiell genügt es, wenn man jedem Tag, auf das man mit JavaScript/DHTML zugreifen will, einen Identifikator gibt. Dazu verwenden Sie das id-Attribut:
    <p id="Galileo">Galileo Press</p>
Ansonsten gibt es noch zwei Formen von Blöcken: <span> für ein Stück HTML oder Text ohne Umbruch davor und dahinter und <div> für HTML oder Text inklusive Umbruch davor und dahinter.
    <div id="div1">
    <!-- HTML-Kommandos etc. -->
    </div>
Auch dem <div>- oder <span>-Tag kann man ein style-Attribut mitgeben, um beispielsweise den Inhalt des Blocks zu verstecken oder zu bewegen. Alle Elemente einer HTML-Seite sind seit dem Internet Explorer 4 in document.all gespeichert. Über den Identifikator kann man dann auf ein Element zugreifen, um – und das ist das eigentlich Interessante – über die style-Eigenschaft des Elements Zugriff auf das Aussehen des Elements zu haben. Mit dem folgenden Code macht man beispielsweise den Layer "div1" aus dem obigen Beispiel unsichtbar:
    document.all.div1.style.visibility = "hidden";
Doch wieso haben wir im vorherigen Kapitel extra getElementById() und getElementsByTagName() eingeführt? Nun, document.all war ein Microsoft-Alleingang in der Browser-Version 4; seit der Browser-Version 5 gibt es auch im Internet Explorer die DOM-Methoden. Deswegen dient document.all nur noch der Browserunterscheidung, denn einige kleinere Unterschiede zwischen den Browsern gibt es weiterhin. Verwendet wird in allen Browsern getElementById(). Im folgenden Abschnitt sehen Sie zahlreiche Beispiele, die den Einsatz dieser Techniken demonstrieren. Davor aber noch ein praktischer Hinweis. Häufig geht es bei DHTML »lediglich« darum, Text in einem Textfeld auszugeben, oder darum, ganz allgemein irgendwo auf der Seite HTML-Code zu platzieren. An dieser Stelle kommt die JavaScript-Eigenschaft innerHTML ins Spiel, die genau das macht: HTML innerhalb eines Elements zu verändern. Das folgende Listing demonstriert das an zwei Beispielen: per innerHTML wird sowohl ein Element einer Aufzählungsliste als auch Text innerhalb eines Absatzes erstellt:
    <html>
    <head>
    <title>CSS</title>
    <script type="text/javascript"><!--
    window.onload = function() {
       document.getElementById("Absatz").innerHTML =
          "Neuer Text";
       document.getElementById("Liste").innerHTML =
          "<li>Neues Element</li>";
    }
    //--></script>
    </head>
    <body>

    <p id="Absatz">Alter Text</p>
    <ul id="Liste">
       <li>Altes Element</li>
    </ul>
    </body>
    </html>
In Abbildung 17.2 sehen Sie das Ergebnis: Die neuen Elemente und Texte erscheinen und überschreiben die alten. Hier klicken, um das Bild zu Vergrößern Abbildung 17.2 Der neue Text und das neue Element erscheinen.
<< 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