Wie Höhe eines dynamisch gefüllten div-containers auslesen?

[alberlie]

Hi,

ein Div-Element wird dynamisch mit Text gefüllt und angezeigt:

function fuellen (text) {

var content="<div id='pop_fenster'>"+text+"</div>";
pup.innerHTML=content;
pup.style.visibility="visible";
}

da fuellen mittels onmouseover aufgerufen wird, werden davor mittels

document.onmouseover = lies_koords;

die aktuelle Position des Mousezeigers ausgelesen und in den variablen pup.style.top und pup.style.left gespeichert.

Komisch (zumindest für mich) ist nun, dass ich nachdem ich in fuellen dem Div-Bereich seinen Inhalt zugewiesen habe (und vorher mit onmouseover=lies_koords) die Mauskoordinaten ausgelesen habe, ich zwar in fuellen sowohl pup.style.left/.top als auch .width habe (der Wert steht im CSS-Bereich von pop_fenster), jedoch keinen Wert in pup.style.height. Doch .height sollte sich doch aus der Länge des übergebenen Textes, plus den CSS-Angaben für pop_fenster ergeben, oder?
Ich will den Wert wissen, um bei zu langem Text (und entsprechend "hohem" div-Bereich") die Angaben in .top entsprechend anpassen zu können um einen scrollbar zu vermeiden...

Was mache ich falsch/wo denke ich falsch?

[wahsaga]

Re: Wie Höhe eines dynamisch gefüllten div-containers auslesen?

Original geschrieben von alberlie
Komisch (zumindest für mich) ist nun, dass ich nachdem ich in fuellen dem Div-Bereich seinen Inhalt zugewiesen habe (und vorher mit onmouseover=lies_koords) die Mauskoordinaten ausgelesen habe, ich zwar in fuellen sowohl pup.style.left/.top als auch .width habe (der Wert steht im CSS-Bereich von pop_fenster), jedoch keinen Wert in pup.style.height.

Über das style-Objekt kannst du nur Werte auslesen, die über das style-Attribut direkt im Element, oder zuvor per Javascript gesetzt wurden.

Um die Höhe (Breite) eines Elementes abzufragen, gibt es aber offsetHeight (offsetWidth).
Lass dich nicht davon irritieren, dass dies in SELFHTML unter der Beschreibung des all-Objektes steht - alle aktuellen Browser (auch IE) unterstützen diese Eigenschaft auch unterhalb des node-Objektes.


Für die meisten anderen CSS-Eigenschaften existieren aber keine analogen Eigenschaften - wenn du also irgendwann mal an mehr interessiert bist, lautet das Stichwort getComputedStyle (bzw. currentStyle - ja, das ist natürlich mal wieder nicht browserübergreifend gleich realisiert. Für ein Cross-Browser-Beispiel siehe bspw. hier.)

[alberlie]

Cool. Funktioniert. Danke! Ein virtuelles Bier gratis, abzuholen ab 17:00 an der Theke.