webdesign » Javascript Tipps » Div-Layer manipulieren

Grundlage für viele Dhtml-Effekte ist die Manipulation von Div-Layern, also positionierten Containern. Insbesondere bei Netscape 4x sind Layer oder positionierte Divs die wichtigste Möglichkeit, Inhalte dynamisch zu verändern.

Der Zugriff auf Div-Layern ist nicht für alle Browser gleich. Als einziger Browser kennt Netscape 4 das layer-object. Beim Internet Explorer 4 hingegen erfolgt der Zugriff auf Html-Elemente über das all-object. Moderne Browser wie Mozilla, Opera 7 oder Internet Explorer ab 5 nutzen dazu die Methoden des Document Object Model (DOM). Diese Unterschiede müssen bei der Programmierung berücksichtigt werden.

Es ist daher sinnvoll, zunächst eine Funktionen zu schreiben, die nach Übergabe der ID die Referenzierung erledigt. Mit if-else Bedingungen wird geprüft, welche Objekte/Methoden dem Browser bekannt sind. Der entsprechende Zweig wird ausgeführt. Dort wird dann lediglich die als Parameter übergebene id eingesetzt, und die passende Referenzierung per return zurückgegeben. Damit kann anschliessend weitergearbeitet werden.

  // Funktion zur Referenzierung von Div-Layern
  function div_ref (id) {
    if      (document.layers)         return document.layers[id];         // NC 4
    else if (document.all)            return document.all[id];            // IE 4
    else if (document.getElementById) return document.getElementById(id); // DOM
    else                              return null;        
  }

Da häufig die CSS-Eigenschaften des Div-Layers manipuliert werden sollen, lohnt es sich, eine leicht modifizierte Variante zu schreiben, bei der gleich style angehängt wird. Das Unterobjekt style repräsentiert bei IE 4 und Dom-Browsern die Stilvorlage (CSS), und wird benötigt, um CSS-Eigenschaften zu verändern.

  // Funktion zur Referenzierung von Div-Layern mit Zugriff auf CSS-Eigenschaften
  function div_ref_style (id) {
    if      (document.layers)         return document.layers[id];              
    else if (document.all)            return document.all[id].style;           
    else if (document.getElementById) return document.getElementById(id).style;
    else                              return null;        
  }

Soll jetzt beispielsweise die Y-Position eines Div-Layers mit der ID "myLayer" verändert werden, reicht eine Zeile für die entsprechende Aweisung. Da top eine CSS-Eigenschaft ist, kommt die Funktion div_ref_style zum Einsatz:

  div_ref_style("myLayer").top =  100;

An dieser Stelle sei auf einen Fallstrick hingewiesen: sofern - W3C-konform - das Doctype gesetzt ist, verlangen manche Browser den Wert als String mit Einheit! Damit kann aber z. B. NC 4 nicht umgehen. Eine kleine Abfrage kann das Problem wie folgt lösen:

  div_ref_style("myLayer").top =  100 + (document.documentElement? "px" : "");

Die Fragezeichenkonstruktion stellt eine verkürzte if-else Abfrage dar: vor dem Fragezeichen steht die Bedingung, dahinter die Werte für erfüllt und nicht erfüllt, getrennt durch den Doppelpunkt. Fuer alle DOM-fähigen Browser wird also "px" angehängt.

Genauso einfach kann man die Hintergrundfarbe eines Div-layers verändern. Zu beachten ist hierbei, daß die CSS-Eigenschaft "Hintergrundfarbe" im NC 4 abweichen angesprochen wird, daher wird zunächst die unterschiedliche Syntax in einer Variablen abgelegt.

  var bgC                       =  document.layers? 'bgColor' : 'backgroundColor';
  div_ref_style("myLayer")[bgC] =  "red";

Zum Schluß noch eine Funktion, die das Zeigen und Verstecken von Div-Layern erledigt:

  function show_hide(id,stat) {
    div_ref_style(id).visibility =  stat? "visible" : "hidden";
  }

Zwei Parameter werden übergeben, die bekannte Div-Layer ID und der Status, der entscheidet, ob der Div-Layer gezeigt oder versteckt wird. Als Status können die boolschen Werte true und false, oder einfach 1 und 0 übergeben werde. Der Aufruf lautet also:

  show_hide("myLayer",1) // zeigen
  show_hide("myLayer",0) // verstecken

Beispiel downloaden und ausprobieren