StyleAssistant-Homepage

27. DHTML mit W3C-DOM (getElementById) (17.05.2000)

Mit der Einführung von Netscape 6 verschwindet das Netscape-eigene Layer-Objektmodell und das vom W3C-DOM hält Einzug in die neue Browserversion. Der Zugriff auf Objekte wie DIVs wird künftig mittels document.getElementById("ObjektId") realisiert. Obwohl man nun zusätzlich zwischen Netscape 4 und 6 unterscheiden muss, hat diese Neuerung auch einen guten Aspekt: Der MSIE 5+ unterstützt ebenfalls diese Technik. Somit lassen sich DHTML-Anwendungen erstellen, die unter Netscape 6 und MSIE 5 ohne Codeänderungen laufen. Das folgende Beispiel 27 zeigt bzw. versteckt Ebenen.


      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

        var ebenenref;

        function ZeigeEbene(Nr)
        {
        ebenenref="ebene"+Nr;
        document.getElementById(ebenenref).style.visibility="visible";
        }

        function VersteckeEbene(Nr)
        {
        ebenenref="ebene"+Nr;
        document.getElementById(ebenenref).style.visibility="hidden";
        }

      //-->
      </SCRIPT>

Die Ebenen besitzen jeweils eine ID (ebene1, ebene2, ebene3) und werden absolut positioniert. Der Zugriff auf andere Style-Eigenschaften wie z. B. width, height, top, left erfolgt ebenfalls nach diesem Prinzip (siehe Tipp 19).

Zusätzlich wird im Beispiel gezeigt, wie Text dynamisch in ein DIV geschrieben werden kann (siehe Tipp 12). Der Funktion TextToDIV() werden die ID des Ziel-DIVs und der gewünschte Text übergeben.


      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function TextToDIV(DIVID,Text)
      {
      document.getElementById(DIVID).firstChild.data=Text;
      }

      //-->
      </SCRIPT>

(27) So sieht's aus ...

Beispiel 27a zeigt, wie sich DIVs über die Ereignisse OnMouseOver bzw. OnMouseOut ein- bzw. ausblenden lassen. Im Beispiel 27b wird darüber hinaus das OnClick-Event einbezogen und die aktuelle Ebene so lange angezeigt, bis eine andere Ebene ausgewählt wird. Diese Beispiele berücksichtigen auch die Unterschiede in den Objektmodellen (DOM) der Browser IE 4, IE 5.x, Netscape 4.x und Netscape 6.

(27a) So sieht's aus ... (27b) So sieht's aus ...
Nach oben Zur Übersicht

Style

Assistant

Tipps & Tricks – Tipp 27 Zur Übersicht

Tipps & Tricks – Tipp 27
Zur Übersicht