JavaScript change DIV: Manipulation des Layouts von HTML-Elementen

Inhalt, wie auch das Layout von DIV-Elementen lässen sich mit Hilfe von JavaScript dynamisch anpassen. Auch wenn Sie ein DIV in JavaScript verschieben möchten, so ist dies über seine CSS-Eigenschaften sehr leicht realisierbar. Derartige Anpassungen werden sehr häufig bei modernen Web-Services des Web 2.0 genutzt. Diese Web-Services erfragen mittels Ajax-Request Nutzdaten, die dynamisch in das bereits im Browser dargestellte HTML-Dokument integriert werden. Die vom Webserver als Ergebnis einer Ajax-Anfrage gelieferten Nutzdaten liegen oft im XML-Format vor.

Basis für die Beispiele soll das im HTML-Codeblock unterhalb dieses Absatzes definierte DIV-Element mit der id d bilden. Auf dieses HTML-Element beziehen sich sämtliche weiter unten in den Script-Beispielen demonstrierten Operationen. Die id ermöglicht es unter Verwendung der getElementById einen Verweis auf das HTML-Elementobjekt zu ermitteln.

Mit der Methode getElementById wird – wie auch mit den Methoden getElementsByName und getElementsByTagName – auf einzelne Knoten innerhalb der HTML-Elementobjekthierarchie nach den Mäßgaben des Document Objekt Model (DOM) zugegriffen. Alle zuvor genannten Methoden sind Teil des in JavaScript vordefinierten Objekts Document.

Das Aussehen des definierten DIV-Elements wird durch das zuvor im Quelltext definierte StyleSheet festgelegt. So werden mittels Style-Eigenschaften Angaben zu einem darzustellenden Rahmen, zur Hintergrundfarbe des DIV, sowie der Position und Ausdehnung des DIV-Elements, gemacht. Die Positionierung des DIVs erfolgt „fixed”, was bedeutet, dass das Element auch beim Scrollen des Anzeigebereichs an der vorgegebenen Stelle im Browserfenster verbleiben soll.

Auch legt der CSS-Style fest, dass das DIV-Element zunächst – durch Setzen der Visibility-Eigenschaft auf „hidden” – nicht angezeigt werden soll. Wie im Style des DIV-Elements festgelegt, erscheint das DIV unmittelbar nach dem Laden der HTML-Seite durch den Browser zunächst nicht.

Neben der Manipulation von HTML-Elementen, die bereits im HTML-Code des HTML-Dokuments enthalten sind, ist auch die Manipulation von dynamisch erzeugten HTML-Elementen möglich. So können mittels JavaScript mit der Methode createElement auf dynamischem Wege neue HTML-Elementobjekte erzeugt werden. Auf diese Elementobjekte kann dann per JavaScript/DOM ebenso zugegriffen werden, wie auf bereits im HTML-Quellcode definierte HTML-Elemente. 

<style>
  #d {
    background-color:lightgreen;
    position:fixed; left:26px; top:33em;
    width:200px; height:8em;
    border:1px solid black;
    visibility:hidden;
  }
</style>
<div id="d">In diesem DIV-Element stehen weitere Informationen</div>
In diesem DIV-Element stehen weitere Informationen

JavaScript DIV Beispiel 1: JavaScript show / hide DIV - DIVs einblenden und ausblenden

Das erste Beispiel soll zeigen, wie mit Hilfe von JavaScript ein DIV-Element ein- bzw. ausgeblendet werden kann. Bitte beachten Sie, dass dies nicht allein mit DIV-Elementen, sondern auch mit anderen HTML-Elementen – beispielsweise HTML-Tags vom Typ SPAN – funktioniert. Definiert werden die JavaScript-Funktion div_show und die JavaScript-Funktion div_hide. Aufgabe dieser Funktionen ist es, das DIV-Element zu verstecken (div_hide) oder aber anzuzeigen (div_show). Nutzen Sie die Links unterhalb des Beispiel-Quellcodes, um diese Funktionen zu testen. 

<a href="javascript:div_show ()" title="">DIV einblenden / anzeigen</a><br>
<a href="javascript:div_hide ()" title="">DIV ausblenden / verstecken</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Fumktion blendet das DIV-Element per JavaScript ein
function div_show () {
  document.getElementById ('d').style.visibility = 'visible';
}

// Folgende Funktion nutzt JavaScript, um das DIV auszublenden
function div_hide () {
  document.getElementById ('d').style.visibility = 'hidden';
}
// -->
</script>

DIV einblenden / anzeigen
DIV ausblenden / verstecken

JavaScript DIV Beispiel 2: JavaScript DIV Position ändern

Im nächsten Beispiel soll die DIV-Position geändert, also das DIV-Element in der Browseranzeige verschoben werden. Zu diesem Zweck wird im nächsten Code-Abschnitt eine Funktion implementiert, welches diese Aufgabe erfüllt. Als Parameter erwartet die Funktion mit dem Namen set_DIV_position zwei Zeichenketten, welche die Werte für die zu setzende X-Position, sowie die neue Y-Position enthalten müssen. In den Zeichenketten soll, neben dem Positionswert, auch die gewünschte Einheit (beispielsweise px, pt, em...) enthalten sein. Bitte beachten Sie, dass die Positionierung des DIV-Elements auf „fixed” bleibt. Das Element bleibt also weiterhin absolut zum Browserfenster an der gesetzten Stelle, wenn der Inhalt des Fensters gescrollt wird. Beachten Sie auch das scroll DIV-Beispiel auf der Folgeseite, in dem ein DIV-Layer animiert bewegt wird. Das Scrollen eines DIVs oder das Verändern der Größe eines DIV-Elements kann beispielsweise zur Realisierung von PopUp-Fenstern genutzt werden, die zur Umgehung von PopUp-Blockern geeignet sind. 

<a href="javascript:set_DIV_position ('300px', '200px')" title="">DIV neu positionieren</a><br>
<a href="javascript:set_DIV_position ('26px', '33em')" title="">DIV in Ausgangsposition</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// JavaScript-Funktion, die ein DIV-Element an eine vorgegebene Position setzt
function set_DIV_position (x_position, y_position) {
  // Abstand vom linken Seitenrand
  document.getElementById ('d').style.left = x_position;
  // Amstand vom oberen Seitenrand
  document.getElementById ('d').style.top = y_position;
}
// -->
</script>

DIV neu positionieren
DIV in Ausgangsposition

JavaScript DIV Beispiel 3: JavaScript DIV height / width - Größe ändern

Folgendes Beispiel soll zeigen, wie mit der Kombination HTML und JavaScript ein Element – hier wieder das oben definierte DIV-Element – in seiner Ausdehnung vergrößert oder verkleinert werden kann. Hierzu wird die JavaScript-Funktion set_dimensions implementiert, welche den gewünschten Effekt erzielen soll. Wie im letzten Beispiel erwartet die Funktion zwei Parameter, die diesmal aber die zu setzende Breite (width) sowie die einzustellende Höhe (height) enthalten muss. Die CSS Style-Eigenschaften width und height des DIVs werden durch die Funktion angepasst. Im resize DIV-Beispiel wird das Vergrößern, sowie das Verkleinern eines DIV-Elements in einer animierten Form implementiert. 

<a href="javascript:set_dimensions ('300px', '200px')" title="">Gr&ouml;&szlig;e des DIV neu setzen</a><br>
<a href="javascript:set_dimensions ('200px', '8em')" title="">Vorherige DIV-Ausdehnung setzen</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Folgende Funktion ändert die X- und Y-Ausdehnung des DIV-Elements
function set_dimensions (width, height) {
  // Breite des DIV-Elements setzen
  document.getElementById ('d').style.width = width;
  // Höhe des DIV-Elements ändern
  document.getElementById ('d').style.height = height;
}
// -->
</script>

Größe des DIV neu setzen
Vorherige DIV-Ausdehnung setzen

JavaScript DIV Beispiel 4: JavaScript DIV Text - Inhalt ändern

Nicht nur das Layout von DIV-Elementen kann mit JavaScript geändert werden. Auch er Inhalt von DIVs, sei es nun einfacher Text oder formatierte Inhalte mit enthaltenen HTML-Tags, kann dynamisch verändert werden. Eine einfache Variante zum Ersetzen des Inhalts eines DIV-Elements bietet die Eigenschaft innerHTML. Mit dieser Variante können auch enthaltene HTML-Tags zugewiesen werden, die entsprechend den StyleSheet-Vorgaben angezeigt werden.

Als zweite Variante kann auch mit der Eigenschaft firstChild – hier befindet sich ein Textknoten, der durch den im DIV-Tag stehenden Text (s. erster Code-Abschnitt dieser Seite) erzeugt wurde – auf den Textinhalt des DIVs zugegriffen werden. FirstChild ist ein Verweis auf den ersten Kindknoten des DIV-Elements und dieser besitzt die Eigenschaft nodeValue, in welcher der im DIV stehende Text gespeichert ist. Eben diese Variante wird im nächsten Beispiel genutzt, um den im DIV bis dato enthaltenen Text durch einen neuen zu ersetzen.

Per Eingabedialog wird der im DIV einzufügende Text vom Benutzer erfragt. Beachten Sie: Wird im HTML-Code ein leeres DIV-Element (ohne enthaltenen Text) angegeben, so tritt beim ungeprüften Zugriff auf das Kindelement mit childNode ein Fehler auf, da kein Kindelement existiert. Gleiches gilt, wenn mit der Methode createElement ein neuer Elementknoten erzeugt und es versäumt wird danach mit createTextNode einen Textknoten zu erzeugen und an das DIV anzuhängen! Die If-Anweisung im Beispiel soll sicher stellen, dass sich an der einzufügenden Stelle auch ein Textknoten befindet, bevor dessen Inhalt überschrieben wird. 

<a href="javascript:set_DIV_text ()" title="">DIV-Text &auml;ndern</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Per JavaScript den DIV-Text ändern
function set_DIV_text () {
  // Existiert ein Kindknoten und handelt es sich dabei um einen Textknoten (nodeType = 3)?
  if (document.getElementById ('d').firstChild && document.getElementById ('d').firstChild.nodeType == 3)
    // Eingabedialog öffnen, in dem der Benutzer den einzufügenden Text eingeben kann
    document.getElementById ('d').firstChild.nodeValue = window.prompt ('Neuer Inhalt:', 'hier Inhalt eingeben');
    // Auch mit der folgenden auskommentierten Codezeile ist diese Operation möglich.
    // Bei dieser Variante werden sogar HTML-Tags in das Element &uuml;bernommen, während die
    // vorherige die Eingabe nicht interpretiert, sonder als reinen Text annimmt.
    //document.getElementById ('d').innerHTML = window.prompt ('Neuer Inhalt:', 'hier Inhalt eingeben');
}
// -->
</script>

DIV-Text ändern

weiter zu Seite 2 3 »

¬ Menu

¬ Gratis Download

¬ Seminare



¬ Yoga

¬ Insolvenzrecht