JavaScript Feststellen ob Höhe fix oder dynamisch

Spike S.

Lieutenant
Dabei seit
Feb. 2012
Beiträge
535
Hallo,

ich würde gerne von einem HTML-Element wissen, ob die Höhe dynamisch (z.B. bei <div> nach Inhalt) oder ob diese fix vorgegeben (Attribut style oder Definition im CSS Bereich) ist.

Im Firefox erhalte ich ja immer die aktuelle tatsächliche Höhe, also kein Wert "auto".

Ziel ist es entsprechend mit jQuery Einfluss auf das Element zu nehmen.

Ich habe irgendwie keinen Anhaltspunkt....

Gruß
Spike S.
 

Spike S.

Lieutenant
Ersteller dieses Themas
Dabei seit
Feb. 2012
Beiträge
535
Das Problem ist nicht die Funktion, sondern die Interpretation des zurückgelieferten Wertes. Wenn die Höhe nicht im CSS oder Attribut definiert ist, erhalte ich beispielsweise "237" und nicht "auto". Anders gesagt, möchte ich wissen, ob der Browser oder der Entwickler die Höhe angegeben hat.
 

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.233
Du bekommst per JS einfach die aktuelle Höhe des Elements.

Was du machen könntest: height per CSS auslesen, wenn gesetzt ist und nicht auto oder was mit Prozent, dann ist die Höhe fix.
Evtl. gibt's noch andere Merkmale. Z.B. wenn overflow: hidden oder scroll gesetzt ist, dann ist die Höhe auch fix
 

Spike S.

Lieutenant
Ersteller dieses Themas
Dabei seit
Feb. 2012
Beiträge
535
Folgende Kombinationen:
Code:
CSS:
height:300px;
height:50%;
height:auto; (Default, wenn nicht angegeben)
liefern bei css("height") immer die tatsächliche ZZZpx. Zum Glück behaupte ich mal :D

Gibt es andere CSS Parameter, oder JavaScript selbst, von denen ich ableiten kann, ob eine Vorgabe erfolgte oder nicht?
 

Spike S.

Lieutenant
Ersteller dieses Themas
Dabei seit
Feb. 2012
Beiträge
535
Danke für die Tipps, aber die Parameter helfen leider auch nicht. obj.clientHeight liefert wie css("height") die tatsächliche Höhe und obj.style.height immer nur "", auch wenn die Höhe angegeben ist. Scheint so, dass ich mir einen anderen Weg suchen muss.

Gruß
Spike S.
 

Xetoxyc

Lieutenant
Dabei seit
Nov. 2010
Beiträge
872
spike ich glaub das es keinen weg gibt dies herauszufinden
außer evtl durch parsen des css files...

der browser interpretiert das "auto" bzw. die "245px"
und setzt den wert in der dom struktur auf "245px" nicht auf auto sondern immer auf den tatsächlichen wert
 

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.233
Es gibt noch einen sehr unschönen Weg:
1. Höhe auslesen
2. Absatz ins div einfügen
3. Höhe auslesen
4. Absatz wieder entfernen
5. Höhen vergleichen

Das ruft natürlich ein möglicherweise sichtbares Flimmern hervor. Um das zu verhindern könnte man das Ganze irgendwo auf der Seite machen wo es keiner sieht (per z-index z.B.) und danach erst das Element einblenden. Wenn das Element schon sichtbar ist kann man mit jQuery bestimmt auch eine 1:1 Kopie anfertigen und diese irgendwo versteckt einblenden, das Prozedere durchführen und wieder löschen.

Ist natürlich potthäßlich und bei großen Geschichten auch inperformant. Aber funktionieren würde es ;)
 

Xetoxyc

Lieutenant
Dabei seit
Nov. 2010
Beiträge
872
mein div hat

200px höhe
eine zeile bsp. 15px höhe
der div enthält 4 zeilen

=> 4*15px => 60px
=> 200px-60px => 140px
=> 140px/15px => 9 Zeilen=>

==> D.H. er müsste 10 zeilen einfügen um den effekt zu erziehlen.. den du beschrieben hast...
somit wär das nur bei "vollen" divs eine lösung...

btw.
wachsen mit height auto gesetzte divs auch dann wenn man sie mit JS in der DOM manipuliert?
 

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.233
ach stimmt. ich hab max-height und min-height voll vergessen ... uargh
 
Top