Netscapes Layer (4.x)  nach oben

Das wichtigste Element für DHTML in Netscapes Browsern ist das layer bzw. ilayer Element - allerdings auch nur in den Browser der 4er-Generation. Diese Elemente sind deshalb so wichtig für DHTML, weil sie erstmals nachträglich den direkten Zugriff auf den Inhalt eines HTML-Dokumentes boten. Der Unterschied zwischen layer und ilayer liegt in der Definition: das layer-Element gilt als Block-Element (wie z.B. blockquote oder p) wohingegen das ilayer-Element als Inline-Element (wie z.B. em oder font) gilt.

Beide Elemente haben folgende, für DHTML wichtige, Attribute:

und width
Attribut Beschreibung
name Name mit dem der Layer angesprochen werden kann.
top Abstand des Layers zum Seitenanfang (layer) bzw. zum vorherigen Element (ilayer). *1
left Abstand des Layers zum linken Seitenrand (layer) bzw. zum linken Element (ilayer).
height Höhe und Breite des Layers.
pagex*1 und pagey Ähnlich left und top.
clip Anzeigebereich des Layers in Koordinaten.
z-index Ebene der Layerschichten übereinander.
background und bgcolor Hintergrundgrafik und Hintergrundfarbe des Layers.

*1 Wird dieses Attribut bei einem layer-Element definiert, so bewirkt es, dass der Layer an den Anfang der Seite angepasst wird. Wird es nicht definiert, verhält sich der Layer wie jedes Block-Element und gliedert sich nach dem letzten Element als Block ein.

Der Zugriff auf einen Layer innerhalb von JavaScript erfolgt entweder über document.layers[x], wobei x der nullbasierte Index des Layers ist, oder document.x, wobei x der im name-Attribut definierte Name des Layers ist. Darüber sind auch die Eigenschaften des Layers abrufbar. Beispiel:

document.meinLayer.top = 123;
document.meinLayer.left = 45;
document.meinLayer.bgcolor = 'red';
// usw. 

Eine zusätzliche Schwierigkeit beim Zugriff auf einen Layer im Netscape Navigator 4.x kommt hinzu, wenn dieser innerhalb eines anderen liegt. Nehmen wir an, Layer B liegt innerhalb von Layer A, so muss, um auf B zuzugreifen zu können erst A adressiert werden. Da der Inhalt jedes Layers ein eigenes Dokument darstellt muss also der Inhalt ebenso behandelt werden. Beispiel:

<layer name="LayerA">
 <layer name="LayerB">
  ... Inhalt ...
 </layer>
</layer>

<script>
document.LayerA.document.LayerB.top = 123;
</script> 

Microsofts Layer (4.x und höher)  nach oben

Für die Browser von Microsoft ab der Version 4.0 benutzt man die Elemente div bzw. span als Layer. div ist vergleichbar mit Netscapes layer und span mit ilayer. Die Definition der Layereigenschaften geschieht hierbei nicht über Attribute sondern über Style-Angaben (CSS). Der Layer selbst wird mit dem id-Attribut mit einem Namen bezeichnet über den das Objekt mit document.all.x angesprochen werden kann, wobei x durch den definierten Namen der Layer-ID zu ersetzen ist. Die Style-Angaben werden über document.all.x.style.y angesprochen, wobei y durch die jeweilige Eigenschaft zu ersetzten ist. Simultan zu den Eigenschaften von Netscapes layer-Element die CSS-Eigenschaften zur Definition des Layers im Microsoft Internet Explorer:

Style-Eigenschaft Beschreibung
top Abstand des Layers zum Seitenanfang (div) bzw. zum vorherigen Element (span).
left Abstand des Layers zum linken Seitenrand (div) bzw. zum linken Element (span).
height und width Höhe und Breite des Layers.
clip Anzeigebereich des Layers in Koordinaten.
z-index Ebene der Layerschichten übereinander.
background-image und background-color Hintergrundgrafik und Hintergrundfarbe des Layers.

Beispiel:

<div style="top:12px; left:34px; clip:rect(0px,0px,56px,78px)" id="meinDiv">
... Inhalt ...
</div>

<script>
document.all.meinDiv.style.left = '123px';
document.all.meinDiv.style.top = '456px';
document.all.meinDiv.style.height = '78px';
// usw.
</script> 

Netscapes Layer (6.x)  nach oben

Netscapes Browser ab der Version 6.0 verhalten sich nun wiederum ganz anders zum Vorgänger. Das layer und ilayer Element wird nun nichtmehr unterstützt, dafür kann nun das div bzw. span Element verwendet werden. Einziger Unterschied zum Microsoft Internet Explorer ist der Zugriff per JavaScript auf das jeweilige Objekt: Da document.all nicht unterstützt wird muss auf das nun neu hinzugekommeneDOMzurück gegriffen werden. Somit wird für den Zugriff document.getElementById(x) verwendet, wobei x durch die ID (id-Attribut) des jeweiligen Layers zu erstzten ist. Beispiel:

<div id="meinDiv"> ... Inhalt ... </div>

<script>
document.getElementById('meinDiv').style.left = '123px';
document.getElementById('meinDiv').style.top = '456px';
document.getElementById('meinDiv').style.height = '78px';
// usw.
</script> 

Operas Layer (5.x)  nach oben

Der Browser Opera ist in Sachen DHTML eher ein Nachzügler mit vielen Fehlern. Doch auch dieser Browser kann - wenn auch begrenzt - mit DHTML umgehen. Im Grunde genommen verhält sich die Version ab 5.0 so wie der Microsoft Internet Explorer ab 4.0 nur mit einigen kleinen Einschränkungen. Auch hier kann document.all.x in Verbindung mit div oder span Elementen verwendet werden um auf die einzelnen Layer zuzugreifen.