JavaScript getElementById Beispiel 2: Manipulation des Layouts von HTML-Elementen

Im nächsten Beispiel wird die Formatierung eines HTML-Elements über dessen StyleSheet manipuliert. Der Beispiel-Code ermöglicht dem Benutzer das Ein- und Ausschalten von Fett- und Kursivschrift beim Layout eines HTML-Elements. Wie im letzten Beispiel wird auch hier ein SPAN-Element zur Demonstration des Scripts verwendet. Die Manipulation des Layouts ist aber auch bei anderen HTML-Elementen, wie beispielsweise Überschriften oder ganzen Absätzen, möglich.

Auch hier wird, wie beim letzten Beispiel, zunächst ein SPAN-Element mit der ID format definiert, dessen Layout mit Hilfe von JavaScript über seine Style-Eigenschaften verändert werden soll. Die darauf folgenden Links dienen der Benutzerinteraktion und starten durch Anklicken die gewünschte Operation. Durch die Funktion toggleBold kann das Schriftgewicht zwischen Fett und Normal verändert werden. Mit der Funktion toggleItalic wird das Ein- bzw. Ausschalten der Kursivschrift implementiert.

Der danach folgende JavaScript-Bereich definiert als erstes die Funktion toggleBold, die durch Anklicken des Links „Schriftgewicht umschalten” ausgeführt wird. Als erstes wird durch Nutzung der Methode getElementById (Methode des Objekts Document) das zu manipulierende HTML-Element über seine ID (in diesem Beispiel lautet die ID „format”) ermittelt. GetElementById liefert einen Verweis auf den entsprechenden Knoten (ein Node-Objekt) im HTML-Elementbaum des HTML-Dokuments, der zum weiteren Zugriff in der Variable element gespeichert wird. Jetzt wird geprüft, ob das Schriftgewicht des Elements bereits auf „bold” gesetzt ist. Dies geschieht über das Style-Attibut des HTML-Elements, in dem alle Angaben zum Layout (das StyleSheet – so auch Informationen über das eingestellte Schriftgewicht) des HTML-Elements gespeichert sind. Ist das Schriftgewicht (Attribut fontWeight des Style-Objekts) bereits auf „bold” gesetzt, so wird es jetzt auf „normal” umgestellt. Ansonsten wird das Schriftgewicht auf „bold” gesetzt, da es bisher auf „normal” stand.

Nun wird die Funktion toggleItalic definiert, welche durch Anklicken des zweiten Links aktiviert wird. Sie funktioniert auf die gleiche Weise, wie die zuvor beschriebene Funktion toggleBold. Der einzige Unterschied ist der, dass statt des Schriftgewichts der Schriftstil (per Zuweisung der entsprechenden Zeichenkette) zwischen „italic” (Kursiv) und „normal” umgestellt wird.

<!-- SPAN-Element mit der ID "format" definieren
     Die Formatierung des Elements soll vom Script manipuliert werden -->
<span id="format">SPAN-Tags</span><br>
<!-- Links, über welche die Manipulation des SPAN-Elements eingeleitet
     werden kann -->
<a href="javascript:toggleBold ()">Schriftgewicht umschalten</a> /
<a href="javascript:toggleItalic ()">Schriftstil umschalten</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion schaltet das Schriftgewicht zwischen Fett und Normal um
function toggleBold () {
  // HTML-Element über die Element-ID ermitteln
  element = document.getElementById ('format');
  // Ist der Text schon Fett?
  if (element.style.fontWeight == 'bold')
    // dann auf Normal setzen
    element.style.fontWeight = 'normal';
  else
    // ansonsten Fett
    element.style.fontWeight = 'bold';
}

// Funktion schaltet den Schriftstil zwischen Kursiv und Normal um
function toggleItalic () {
  // HTML-Element über die Element-ID ermitteln
  element = document.getElementById ('format');
  // Schriftstil schon Kursiv?
  if (element.style.fontStyle == 'italic')
    // dann Normal einstellen
    element.style.fontStyle = 'normal';
  else
    // ansonsten Kursiv
    element.style.fontStyle = 'italic';
}
// -->
</script>

SPAN-Tags
Schriftgewicht umschalten / Schriftstil umschalten

« zurück zu Seite 1