JavaScript Feststellen ob Höhe fix oder dynamisch

[Spike S.]

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.

 

[Jojo_44]

http://api.jquery.com/css/

Damit könntest du height auslesen.

mfg Jojo

 

[Spike S.]

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]

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.]

Folgende Kombinationen:

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

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

 

[Hancock]

Also ich würde mal die Werte
obj.clientHeight
obj.style.height
anschauen, bei mir ist bei einem nicht festgelegten Element style.height=="" und clientHeight ne Zahl.

 

[Spike S.]

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]

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]

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]

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]

ach stimmt. ich hab max-height und min-height voll vergessen ... uargh