Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 17 DHTML und CSS
  gp 17.1 Grundlagen
  gp 17.2 Cascading Style Sheets
  gp 17.3 HTML-Elemente
  gp 17.4 Beispiele
    gp 17.4.1 Animiertes Logo
    gp 17.4.2 Sichtbar und unsichtbar
    gp 17.4.3 Neuer Mauszeiger
    gp 17.4.4 Permanentes Werbebanner


Galileo Computing

17.2 Cascading Style Sheets  toptop

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 (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.

Abbildung
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:

gp  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.
gp  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
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




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