Blue Flower

1.2
Veränderung der Webseite mit DHTML

Grundsätzlich kann man mit Style Sheets die Optik einer
Webseite viel besser und effektiver gestalten als mit reinem HTML. Insbesondere
kann man damit das Layout von der Struktur der Seite abtrennen. Diese Aussagen
sollten – so richtig sie auch sind - für Sie kalter Kaffee sein. Wenn Sie nun
die Style Sheets einer Seite dynamisch mit JavaScript verändern, reden wir von
DHTML. Aber auch Animationseffekte wie das Ein- und Ausblenden von Teilen einer
Webseite über andere JavaScript-Techniken gehört dazu. Lassen Sie uns in diesem
und dem folgenden Beispiel ansehen, wie Sie animierte Webseitenänderungen mit
jQuery schnell, einfach und bequem und dennoch zuverlässig in den
unterschiedlichen Browsern bewerkstelligen können. In diesem Beispiel wechseln
wir im Wesentlichen dynamisch die CSS-Klasse eines Elements.

Zuerst betrachten wir eine kleine CSS-Datei, die in der
folgenden Webseite eingebunden werden soll und im lib/css-Verzeichnis
gespeichert sein sollte (kap2_2.css):

Listing 1.3       Die neue CSS-Datei

body {

  background: black; color: white;
font-size: 20px;

}

div {

  background: white; color: red;
font-size: 20px; padding: 10px; margin: 10px;

  border-width: 1pt; border-style:
solid; width: 350px; min-height: 75px;

}

.mKlasse {

  background: red; color: yellow; font-size:
24px;

}

In der CSS-Datei passiert nicht sonderlich viel. Es werden
ein paar Eigenschaften für die gesamte Webseite und alle Elemente vom Typ div festgelegt. Von hauptsächlichem Interesse ist
die Klasse .mKlasse. Diese soll beim Laden
der folgenden Webseite noch nicht verwendet werden, sondern erst dynamisch bei
einer Anwenderaktion zugewiesen werden. Und dazu kommen JavaScript und jQuery
zum Einsatz (kap2_2.html):

Listing 1.4       Verändern der verwendeten CSS-Klasse

  <script
type="text/javascript">

    $(document).ready(function () {

      $("#a").click(function
() {


$("#c").addClass("mKlasse");

      });

      $("#b").click(function
() {

         $("#c").removeClass("mKlasse");

      });

    });

  </script>

</head>

<body>

  <h1>Veränderung von Style
Sheets mit jQuery</h1>

  <button
id="a">CSS-Klasse hinzufügen</button>

  <button
id="b">CSS-Klasse entfernen</button><hr />

  <div id="c">Niemand ist weiter von
der Wahrheit entfernt als derjenige,

    der alle Antworten weiß.</div><hr />

  <div id="div1">

    Vom Wahrsagen lässt sich wohl leben, aber nicht vom
Wahrheit sagen.

  </div>

</body>

</html>

In dem Beispiel sehen Sie unterhalb einer Überschrift zwei
Schaltflächen und zwei Texte jeweils innerhalb eines DIV-Bereichs, der jeweils
mit einer Trennlinie abgegrenzt wird. Das ist pures HTML. Im Head finden Sie
wieder die Verknüpfung mit der CSS-Datei (nicht abgedruckt).

Bild 1.3            Die Seite nach dem Laden

Das Aussehen von dem Text unterhalb der Schaltflächen beziehungsweise
den ersten DIV-Container wollen wir jedoch mit jQuery nun manipulieren. Dazu
hat der DIV-Container eine ID. Der Text darunter ist als Vergleichstext
gedacht.

Das Beispiel verwendet zum Zugriff auf Elemente der
Webseite die im ersten Beispiel schon besprochenen jQuery-Mechanismen. Auch für
die Reaktion auf den jeweiligen Klick auf eine Schaltfläche verwenden wir
wieder die Methode click().
Soweit nichts Neues also.

Nun sollte Ihnen auffallen, dass wir die CSS-Klasse aus
der verknüpften CSS-Datei beim Laden der Webseite noch keinem Element zuweisen.
Aber beachten Sie Zeile $("#c").addClass("mKlasse");.
Wie der Name der Methode addClass() offensichtlich macht, wird durch den Aufruf dieser Methode dem vorangestellten
Element die benannte Style Sheet-Klasse zugewiesen. Und das dynamisch, aber
ohne dass die Webseite irgendwie neu geladen wird. Die Funktionalität wird beim
Klick des Anwenders auf den entsprechenden Button ausgelöst, wie so auf Grund
der umgebenden click()-Methode
sehen.

In der Reaktion auf die zweite Schaltfläche können Sie

erkennen, wie vollkommen analog die Klasse wieder entfernt wird. Dazu kommt die
Methode removeClass() zum Einsatz. Wenn Sie das Beispiel testen sehen Sie, dass Schrift und
Hintergrund entsprechend verändert werden.

CHV_BOX_ID_01

icn001

Praxistipp

Mit
der Methode
toggleClass() könnten wir das Beispiel mit
analoger Funktionalit
ät
noch leichter schreiben. Damit wird eine CSS-Klasse entfernt oder hinzugef
ügt. Und zwar immer abhängig vom Zustand. Ist die
Klasse bereits zugewiesen, wird sie entfernt und umgekehrt. Wir br
äuchten also nur eine
Schaltfl
äche.