CSS / DOM: Wie kann ich die Höhe einer Zeile inkl. Zeilenabstand auslesen?
- Ersteller sim
- Erstellt am
Hai,
hmm hab grad ein altes, selbstgecodetes cooles Klappmenü gefunden, das ich vor ein paar Jahren mal gemacht habe, für das ich allerdings immer manuell die Höhe der einzelnen aufzuklappenden <div>'s angeben musste.
Jetzt würd ich interessehalber gerne wissen, ob man das nicht auch praktischerweise über irgendeine Style-Eigenschaft oder sowas auslesen kann.
Ich vermute kaum, dass es etwas wie div.height gibt, ohne dass ich es vorher angegeben habe, drum hab ich gedacht, kann man ja die Höhe aus den einzelnen Zeilen und den Zeilenabständen zusammen setzen. Jedoch gibt line-height keinen Wert zurück
Wäre für Aufklärung echt dankbar
Mfg
sim
hmm hab grad ein altes, selbstgecodetes cooles Klappmenü gefunden, das ich vor ein paar Jahren mal gemacht habe, für das ich allerdings immer manuell die Höhe der einzelnen aufzuklappenden <div>'s angeben musste.
Jetzt würd ich interessehalber gerne wissen, ob man das nicht auch praktischerweise über irgendeine Style-Eigenschaft oder sowas auslesen kann.
Ich vermute kaum, dass es etwas wie div.height gibt, ohne dass ich es vorher angegeben habe, drum hab ich gedacht, kann man ja die Höhe aus den einzelnen Zeilen und den Zeilenabständen zusammen setzen. Jedoch gibt line-height keinen Wert zurück
Wäre für Aufklärung echt dankbar
Mfg
sim
Klar, das geht, Auslesen, Setzen und Entfernen von Style-Elementen. Kopier Dir mal den folgenden Block in eine leere Datei und schaus Dir an (hab gerade keinen Webspace zur Hand).
Code:
<html>
<head>
<script type="text/javascript">
function eins () {
var x;
x = document.getElementById("Absatz").style.height;
alert(x);
}
function zwei () {
document.getElementById("Absatz").style.height = "100px";
}
function drei () {
document.getElementById("Absatz").style.height = "200px";
}
</script>
</head>
<body>
Zeilenabstand: <br>
<a href="javascript:eins()">- anzeigen</a><br>
<a href="javascript:zwei()">- auf 100px stellen</a><br>
<a href="javascript:drei()">- auf 200px stellen</a> <br><br>
<div id="Absatz" style="height:30px;background-color:#55AA55;"></div>
</body>
</html>
Zuletzt bearbeitet:
Hi,
danke für deine Antwort, allerdings geht es mir darum, die Höhe nicht erst setzen zu müssen, da ich ja acht oder so verschiedene Absätze (hab nachgeschaut, eigentlich sinds Tabellen) habe, die alle verschieden hoch sind
Ich müsste also height auslesen, ohne es davor explizit zu setzen
/edit: Es geht um das Klappmenü auf folgender Seite: http://simeon-carstens.com/test/indexoldmenu.php
Am Anfang des JS-Bereichs habe ich die Höhen der einzelnen Tabellen in ein Array eingetragen...
danke für deine Antwort, allerdings geht es mir darum, die Höhe nicht erst setzen zu müssen, da ich ja acht oder so verschiedene Absätze (hab nachgeschaut, eigentlich sinds Tabellen) habe, die alle verschieden hoch sind
Ich müsste also height auslesen, ohne es davor explizit zu setzen
/edit: Es geht um das Klappmenü auf folgender Seite: http://simeon-carstens.com/test/indexoldmenu.php
Am Anfang des JS-Bereichs habe ich die Höhen der einzelnen Tabellen in ein Array eingetragen...
Zuletzt bearbeitet:
feelx
Grand Admiral Special
OBrian liest ja mit der Funktion Eins die Höhe aus... also wie folgt
Es ist natürlich auch möglich alle "heights" in ein Array auszulesen...
Code:
x = document.getElementById("Absatz").style.height;Es ist natürlich auch möglich alle "heights" in ein Array auszulesen...
Naja das ist mir schon klar, aber O'Brian hat die Höhe ja zuvor angeben, bevor er sie ausliest:
Und genau das möchte ich vermeiden, für jedes Element die Höhe angeben zu müssen
HTML:
<div id="Absatz" style="height:30px;background-color:#55AA55;"></div>feelx
Grand Admiral Special
Ah - jetzt ist mir klar, was du willst - Die Höhe auslesen, damit du sie nicht jeweils in den Array heights schreiben musst. Bin fast sicher, dass DAS nicht geht, weil du ja nur die CSS-Eigenschaft ausliest und nicht die tatsächliche Höhe (was z.B. beim window-objekt möglich ist).
Bei allen anderen Objekten dürfte es nicht gehen. Allerdings ist deine Variante auch nicht sehr "elegant" gelöst, denn du gehst davon aus, dass alle User mit Standard Schriftgrad surfen. Sobald aber jemand einen grösseren Schriftgrad gewählt hat, reicht deine voreingestellte Höhe nicht mehr aus und es schiebt die Inhalte übereinander.
Wäre es evtl daher eine bessere Lösung, das Ganze mit Listen zu lösen (<ul>) und je nach Status mit CSS display: none; bzw. display: block; anzeigen zu lassen?
So würdest du einerseits das "heights-"Problem umgehen und andererseits könntest du dasselbe ganz ohne JavaScript realsieren. Nebenbei würdest du auf die Tabellen, bzw. TDs verzichten...
Bei allen anderen Objekten dürfte es nicht gehen. Allerdings ist deine Variante auch nicht sehr "elegant" gelöst, denn du gehst davon aus, dass alle User mit Standard Schriftgrad surfen. Sobald aber jemand einen grösseren Schriftgrad gewählt hat, reicht deine voreingestellte Höhe nicht mehr aus und es schiebt die Inhalte übereinander.
Wäre es evtl daher eine bessere Lösung, das Ganze mit Listen zu lösen (<ul>) und je nach Status mit CSS display: none; bzw. display: block; anzeigen zu lassen?
So würdest du einerseits das "heights-"Problem umgehen und andererseits könntest du dasselbe ganz ohne JavaScript realsieren. Nebenbei würdest du auf die Tabellen, bzw. TDs verzichten...
Ähnliche Themen
