Heiko Kromm: göße von div-elementen auslesen und ändern

Hallo,
ich möchte gerne die Höhe eines div Elementes auslesen und ein anderes dann an diese Höhe anpassen.

Ich erstelle ein Div Element mit der ID "background", welches in meinem Sylesheet wie folgt definiert ist: #background { position:absolute; top:10px; left:10px; z-index:1;}.

In diesem div-Element befindet sich dynamisch generierter HTML-Code. Aus diesem Grund ist die Höhe des Elements immer unterschiedlich.
Ich möchte jetzt die Höhe des div-Elements auslesen, da ich ein anderes Div-Element an diese Höhe anpassen möchte. Ist dies irgendwie möglich?

Alternativ würde es mir auch helfen, wenn ich die komplette Höhe des HTML-Dokumentes (nicht nur die des sichtbaren Browserfensters) in Erfahrung bringen könnte.

Danke für jede Hilfe
Heiko

  1. Hallo Heiko,

    ich möchte gerne die Höhe eines div Elementes auslesen und ein anderes dann an diese Höhe anpassen.

    Ich erstelle ein Div Element mit der ID "background", welches in meinem Sylesheet wie folgt definiert ist: #background { position:absolute; top:10px; left:10px; z-index:1;}.

    Die Höhe bekommst du über "offsetHeight" Zumindest bei den neueren Browsern:
    hoehe=window.document.getElementById("background").offsetHeight;

    diese wiederum kannst du über:
      window.document.getElementById("foo").style.height=hoehe+"px";
    einem anderen Element zuweisen.

    HTH

    Jochen

    1. Ein Script, dass dir helfen könnte, findest du unter http://selfhtml.teamone.de/javascript/beispiele/fensterueberwachen.htm.

      1. FsmE,

        Ein Script, dass dir helfen könnte, findest du unter http://selfhtml.teamone.de/javascript/beispiele/fensterueberwachen.htm.

        Nein. Damit kannst Du Fenster überwachen, aber keine Layer.

        In sensibus mistis,
        HaThoV

        --
        Besuchen Sie http://www.4html.de, wenn Sie an einer
        Neuen Generation von Web-Publishing mitarbeiten wollen.
    2. Die Höhe bekommst du über "offsetHeight" Zumindest bei den neueren Browsern:
      hoehe=window.document.getElementById("background").offsetHeight;

      Danke für die schnelle Antwort. Leider erhalte ich immer nur eine Höhe von 0. Nur wenn ich background eine Höhe zugewiesen habe, erhalte ich über offsetHeight einen Wert, womit dann aber mein div-Element keine dynamische Größe mehr hätte.

      MfG
      Heiko

      1. Hallo Heiko,

        hoehe=window.document.getElementById("background").offsetHeight;

        Danke für die schnelle Antwort. Leider erhalte ich immer nur eine Höhe von 0.

        Wann lässt du diesen Wert anzeigen? Welcher Browser? Ich habe es nicht ausprobiert. Denke aber, dass er erst nach dem onLoad() gesetzt ist.

        Nur wenn ich background eine Höhe zugewiesen habe, erhalte ich über offsetHeight einen Wert

        Das ist eigentlich das Verhalten von style.height. Dort steht auch nicht die Höhe in px, sondern der zugewiesene Wert (50%, 1em, ...)

        Hast du etwas online zum angucken?

        Grüße,

        Jochen

        P.S. wenn du auf meiner Seite guckst. Die Höhe der Navigation wird genau über diesen Mechanismus der Seitenhöhe angepasst. Also bei mir klappt's.

        Script: http://www.maxx4u.de/js/nav.js function sizenav()

        1. Ich kann zwar nicht genau sagen, wo mein Fehler lag, aber jetzt funktionierts. Vielen Dank für die Beispieldateien.

          Beste Grüße
          Heiko

  2. FsmE,

    Ich erstelle ein Div Element mit der ID "background", welches in meinem Sylesheet wie folgt definiert ist: #background { position:absolute; top:10px; left:10px; z-index:1;}.

    Im Style-Bereich definierst Du einen globalen Wert, den der Brauser für das entsprechende Element entsprechend umsetzt, der aber deswegen noch keine objektbezogene Eigenschaft ist, die Javascript über das Objekt abfragen könnte.

    Um den Wert mit Javascript abfragen zu können, muß er also entweder per Attribut (<tag style="irgendwas">) oder gleich per Javascript zugewiesen sein.

    In sensibus mistis,
    HaThoV

    --
    Besuchen Sie http://www.4html.de, wenn Sie an einer
    Neuen Generation von Web-Publishing mitarbeiten wollen.