nicht angemeldet
Höhe eines DIVs erkennen wenn dieser inhaltlich geändert wird
Hallo zusammen,
ich versuche gerade die Höhe eines DIVs auszulesen, das funktioniert auch wunderbar. Wenn die Höhe per JavaScript geändert wird wird auch der richtige Wert angezeigt. Wenn ich nun aber den Inhalt des DIVs verändere und dieses deshalb größer wird, bekomme ich eine falsche Höhe angezeigt.
Ich meine mich zu erinnern, dass es dafür auch einen Javascript Befehl gab um die tatsächliche Höhe auszulesen, aber kann mich nicht erinnern.
Hat jemand einen Tip für mich wie ich an die richtige Höhe komme?
Viele Grüße,
Andreas
<html>
<head>
<title></title>
</head>
<script language="javascript">
function getHeight(){
var myHeight = document.getElementById('myDiv').offsetHeight;
alert(myHeight);
}
function changeHeight(hoehe1){
document.getElementById('myDiv').style.height = hoehe1;
}
function mytext(){
document.getElementById('myDiv').innerHTML = "kldshlh<p>löjdlöj<p>lkyjdglöyjdfgl<p>lkjyfdljlöjödfjö<p>lökjymfamgvmlkyj<p>lkjöyjbxyjöcjöjölk<p>";
}
function tuWas() {
alert("Hallo User!");
}
</script>
<body>
<div id="myDiv" style="height:50px;">
hallo
</div>
<a href="javascript:getHeight();">Hoehe</a> <a href="javascript:changeHeight(100);">Hoehe ändern 100</a> <a href="javascript:changeHeight(200)">Hoehe ändern 200</a> <a href="javascript:mytext()">Text</a>
</body>
</html>
-
Hat jemand einen Tip für mich wie ich an die richtige Höhe komme?
Warum hast du dem Element eine natürliche Eigenschaft genommen.
Offenbar wünscht du das normale Verhalten eines Elements.
Andernfalls: schalte um zwischen einer CSS Klasse, welche die natürliche Eigenschaft präsentiert, und einer Klasse, die die Höhe limitiert.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
-
Hat jemand einen Tip für mich wie ich an die richtige Höhe komme?
Warum hast du dem Element eine natürliche Eigenschaft genommen.
Offenbar wünscht du das normale Verhalten eines Elements.
Andernfalls: schalte um zwischen einer CSS Klasse, welche die natürliche Eigenschaft präsentiert, und einer Klasse, die die Höhe limitiert.mfg Beat
Das Problem ist das sich in diesem DIV andere DIVs befinden welche vom start her unsichtbar sind und erst bei Benutzerinteraktion sichtbar und wieder unsichtbar werden.
Da ein zweites DIV immer genauso groß sein soll wie das erste benötige ich die neue größe, welche ich aber nicht abgreifen kann.Da sBeispiel hier ist wie gesagt ein Beispiel um die Thematik deutlicher machen zu können.
-
-
Hi,
ich versuche gerade die Höhe eines DIVs auszulesen, das funktioniert auch wunderbar. Wenn die Höhe per JavaScript geändert wird wird auch der richtige Wert angezeigt. Wenn ich nun aber den Inhalt des DIVs verändere und dieses deshalb größer wird, bekomme ich eine falsche Höhe angezeigt.
Weil du annimmst, dadurch aendere sich eine feste, gesetzte Hoehe - tut sie aber nicht.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Weil du annimmst, dadurch aendere sich eine feste, gesetzte Hoehe - tut sie aber nicht.
Dann stellt sich die Frage wie ich denn nun den Wert bekomme.
Gibt es keine Möglichkeit da ran zu kommen?-
Hi,
Weil du annimmst, dadurch aendere sich eine feste, gesetzte Hoehe - tut sie aber nicht.
Dann stellt sich die Frage wie ich denn nun den Wert bekomme.
Gibt es keine Möglichkeit da ran zu kommen?Doch, und du hast sie bereits gefunden - offsetHeight.
Aber vielleicht moechtest du erst mal eine ganz andere Frage stellen - wie verhindere ich, dass sich die Hoehe eines Elementes nicht an seinen Inhalt anpasst.
Ganz einfach - in dem du keine feste Hoehe vergibst, sondern den in CSS dafuer vorgesehenen Wert.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
wie verhindere ich, dass sich die Hoehe eines Elementes nicht an seinen Inhalt anpasst.
Ganz einfach - in dem du keine feste Hoehe vergibst, sondern den in CSS dafuer vorgesehenen Wert.Vielleicht sucht er http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height@title=min-height.
Mathias
-
-
Hi there,
Dann stellt sich die Frage wie ich denn nun den Wert bekomme.
Gibt es keine Möglichkeit da ran zu kommen?Hast Du irgendetwas gegen die Verwendung von getComputedStyle() oder liest Du einfach nicht alle Antwortpostings?
-
Hi,
Hast Du irgendetwas gegen die Verwendung von getComputedStyle()
Ich habe dagegen - Bedenken. Bzw. sehe nicht, wie das hier helfen wuerde.
Das Element hat nun mal eine feste Hoehe, und die aendert sich auch nicht - da kann man m.E. so viel computen, wie man will, der Wert duerfte der gleiche bleiben.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi there,
Das Element hat nun mal eine feste Hoehe, und die aendert sich auch nicht - da kann man m.E. so viel computen, wie man will, der Wert duerfte der gleiche bleiben.
Du darfst dem Element keinen ursprünglichen Wert zuweisen, das heisst, solange es leer ist, liefert getComputedStyle den Wert 0px für die Höhe. Änderst Du dann seinen Inhalt, bspw. befüllst Du es mit innerHTML mit einem Bild, liefert getComputedStyle danach die Höhe des Bildes zurück.
Als Lösung kann man, wenn man eine ursrpgl. Höhe benötigt, dem DIV-Element ja ein Platzhalterelement mit vorgegebner Höhe einschreiben, wenn es das Design erfordert.Der IE wird vermutlich wieder Zicken machen, selbst wenn man statt getComputedStyle currentStyle[attribut] verwendet, gibt er vermutlich den Wert "auto" zurück, aber das liesse sich sicher auch irgendwie lösen...
-
Hi,
Du darfst dem Element keinen ursprünglichen Wert zuweisen,
Das brauchst du mir nicht zu sagen.
Änderst Du dann seinen Inhalt, bspw. befüllst Du es mit innerHTML mit einem Bild, liefert getComputedStyle danach die Höhe des Bildes zurück.
Dann duerfte sich die Hoehe ja auch aendern.
Wenn man aber einen festen Wert vorgibt, dann nicht.Als Lösung kann man, wenn man eine ursrpgl. Höhe benötigt, dem DIV-Element ja ein Platzhalterelement mit vorgegebner Höhe einschreiben, wenn es das Design erfordert.
Oder einfach bei der derzeitigen Hoehenangabe bleiben - und diese dann auf einen geeigneteren Wert aendern, wenn man neuen/anderen Inhalt einfuegt, dem sich die Hoehe dann automatisch anpassen soll.
Und dann kommt wieder offsetHeight dran, wenn man an der effektiben Hoehe in Pixeln dann noch interessiert ist.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi there,
Du darfst dem Element keinen ursprünglichen Wert zuweisen,
Das brauchst du mir nicht zu sagen.
Dann halt nicht... ;)
Oder einfach bei der derzeitigen Hoehenangabe bleiben - und diese dann auf einen geeigneteren Wert aendern, wenn man neuen/anderen Inhalt einfuegt, dem sich die Hoehe dann automatisch anpassen soll.
Wenn ich die Hoehenangabe auf einen geeigneten Wert ändere, dann brauch ich sie ja nicht mehr zu ermitteln.
Und dann kommt wieder offsetHeight dran, wenn man an der effektiben Hoehe in Pixeln dann noch interessiert ist.
kommt das gleiche 'raus wie mit getComputedStyle (naja, nicht ganz, ich vermut' mal auf die schnelle, daß beim Auslesen von Styleangaben noch die Einheit mitkommt, während offsetHeight nur eine Zahl zurückliefert.)
In jedem Fall aber scheint mir die "Verzweiflung" des OP nicht wirklich angebracht;)-
Hi,
Oder einfach bei der derzeitigen Hoehenangabe bleiben - und diese dann auf einen geeigneteren Wert aendern, wenn man neuen/anderen Inhalt einfuegt, dem sich die Hoehe dann automatisch anpassen soll.
Wenn ich die Hoehenangabe auf einen geeigneten Wert ändere, dann brauch ich sie ja nicht mehr zu ermitteln.
Eben, wieder ein Schritt gespart :-)
Ich nehme ja mal an, dass der OP sie nur ermitteln wollte, weil ihm kein geeigneterer Wert einfiel.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Ich nehme ja mal an, dass der OP sie nur ermitteln wollte, weil ihm kein geeigneterer Wert einfiel.
Nun, ich lese schon die Antworten. Aber wie ihr ja schon festgestellt habt funktioniert auch die getComputedStyle Methode nicht mit einem festen Wert.
Aber wenn ich überhaupt keine Größe angebe funktioniert es wie ihr auch festgestellt habt.Ich habe mir nun so geholfen, dass ich einen festen Wert vorgebe und in dem Moment wo der Inhalt wechselt die Höhe auf 'auto' setze. Dies ist mit dem Layout vereinbar und funktioniert perfekt.
Vielen Dank für eure Hilfe, ich habe wieder einiges gelernt.
Viele Grüße, der OP Andreas
-
-
-
-
-
-
-
-
-
Hi,
ich versuche gerade die Höhe eines DIVs auszulesen, das funktioniert auch wunderbar. Wenn die Höhe per JavaScript geändert wird wird auch der richtige Wert angezeigt. Wenn ich nun aber den Inhalt des DIVs verändere und dieses deshalb größer wird, bekomme ich eine falsche Höhe angezeigt.
die Höhe ändert sich nicht. Das Element hat hartkodiert eine Höhe von 50px - dieser Wert wird nie verändert. Allerdings solltest Du die Effizienz Deines Codes optimieren; die Code-Zeile in changeHeight() erfordert Rechenzeit, führt jedoch zu keiner Wirkung. Entferne sie also.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Allerdings solltest Du die Effizienz Deines Codes optimieren; die Code-Zeile in changeHeight() erfordert Rechenzeit, führt jedoch zu keiner Wirkung.
Auch, wenn du an dieser Formulierung in letzter Zeit vermehrt Gefallen zu finden scheinst :-), muss ich dir hier leider widersprechen:
Aehm, Cheatah - "informiere dich ueber das Stichwort Quirks Mode".
*SCNR*
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Aehm, Cheatah - "informiere dich ueber das Stichwort Quirks Mode".
nur, wenn Du Deinen Agovis Wahn ablegst.
*SCNR*
Eben ;-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Aehm, Cheatah - "informiere dich ueber das Stichwort Quirks Mode".
nur, wenn Du Deinen Agovis Wahn ablegst.
Ich habe keinen (zumindest keinen, von dem ich wuesste).
Aber der Englaender schreibt nicht so gerne zusammen, wie wir das tun, und aus seiner Sprache stammt der Begriff nun mal. Da lasse ich mir also hoechstens noch die Groszschreibung vorwerfen ...
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
nur, wenn Du Deinen Agovis Wahn ablegst.
Ich habe keinen (zumindest keinen, von dem ich wuesste).echt nicht? Ich kann Dir welchen besorgen, ultra günstig! Ein echtes Schnäppchen, beste Qualität, sowas kriegst Du nirgendwo sonst! ;-)
Aber der Englaender schreibt nicht so gerne zusammen, wie wir das tun, und aus seiner Sprache stammt der Begriff nun mal. Da lasse ich mir also hoechstens noch die Groszschreibung vorwerfen ...
Englischgroßschreiber! Turnbeutelvergesser! Warmduscher! Seerosengießer!
Schalten Sie auch nächste Woche ein, wenn es wieder heißt: Verarsch Dich selbst, dann verarscht Dich Gott, und austeilen ist seliger denn einstecken. Wir wünschen Ihnen noch einen frohen Ostersonntag am heutigen Weihnachtsabend. Machen Sie's gut, und danke für den Darwin-Fisch!
Cheatah, beteuernd, heute noch keinen Alkohol getrunken zu haben
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
-
Hi there,
Ich meine mich zu erinnern, dass es dafür auch einen Javascript Befehl gab um die tatsächliche Höhe auszulesen, aber kann mich nicht erinnern.
Hat jemand einen Tip für mich wie ich an die richtige Höhe komme?was Du suchst ist vermutlich getComputedStyle() oder ähnliche Funktionen für alternative Browser...