Höhe eines Elements auslesen, wenn diese nicht max-heigt hätte

[Encoder]

Hallo Forum
Ich hab wieder mal ein Problem das ich nicht mal gescheit beschreiben kann. Versuchs trotzdem mal :-)

Ich habe eine ul-Liste. Die Liste kann sehr lang werden, deswegen hat das ul Element eine maximale Höhe und overflow:scroll, damit eine Scrollbar angeboten wird. Funktioniert auch soweit.

Jetzt würd ich gerne in JavaScript wissen wie groß die Liste wirklich wäre, wenn keine max. Höhe gesetzt wäre. Kann ich das irgendwie rausfinden? Mir fällt nur ein, max-height erst mal wegzunehmen, dann die Höhe auslesen und dann wieder zu setzen. Aber das klingt mir nicht sehr elegant und sieht außerdem auch nicht unbedingt so toll aus.

[Matthias Apsel]

Om nah hoo pez nyeetz, Encoder!

Jetzt würd ich gerne in JavaScript wissen wie groß die Liste wirklich wäre, wenn keine max. Höhe gesetzt wäre. Kann ich das irgendwie rausfinden? Mir fällt nur ein, max-height erst mal wegzunehmen, dann die Höhe auslesen und dann wieder zu setzen. Aber das klingt mir nicht sehr elegant und sieht außerdem auch nicht unbedingt so toll aus.

also mein firebug zeigt trotz max-height: 50px; die "richtige" Höhe von in diesem Fall etwas über 900px an.

Matthias

[Encoder]

also mein firebug zeigt trotz max-height: 50px; die "richtige" Höhe von in diesem Fall etwas über 900px an.

Seltsam! Habs ausprobiert, bei mir steht in meinem Beispiel die max. Höhe als height in Firebug. Also nur das was man tatsächlich sieht. Sowohl im Layoutfenster als auch in den "computed" Werten.
Und selbst wenn da das richtige drin stehen würde, ich könnts mit JS nicht auslesen, das geht ja nur wenn man den Wert ausdrücklich mit CSS setzt.

Ich hab folgenden Schnipsel verwendet um das auszuprobieren.

<div style="width:300px;">
<ul id="myul" style="border:1px solid red; max-height:100px; overflow:scroll;">
<li>dfsdf</li>
<li>dfsdf</li>
<li>dfsdf</li>
<li>dfsdf</li>
<li>dfsdf</li>
<li>dfsdf</li>
<li>dfsdf</li>
<li>dfsdf</li>
<li>dfsdf</li>
</ul>
<input type="button" onclick="alert(document.getElementById('myul').style.height);" />
</div>

[Matthias Apsel]

Om nah hoo pez nyeetz, Encoder!

also mein firebug zeigt trotz max-height: 50px; die "richtige" Höhe von in diesem Fall etwas über 900px an.

Seltsam! Habs ausprobiert, bei mir steht in meinem Beispiel die max. Höhe als height in Firebug. Also nur das was man tatsächlich sieht. Sowohl im Layoutfenster als auch in den "computed" Werten.

Na gut, das werd ich gleich mal testen, ich hab mit Firebug an den Eigenschaften gespielt und sie hinterher ausgelesen. Ich meld mich noch mal mit dem Schnipsel.

Und selbst wenn da das richtige drin stehen würde, ich könnts mit JS nicht auslesen, das geht ja nur wenn man den Wert ausdrücklich mit CSS setzt.

Das ist falsch, es gibt zum Beispiel getBoundingClientRect().top und getBoundingClientRect().bottom. Siehe quirksmode.org.

Matthias

[molily]

Was ist mit scrollHeight?

Mathias