[JavaScript] Höhe eines DIVs herausfinden

[Luke]

Hallo,
Ich bin in JavaScript nicht sehr versiert und versuche nun den height wert eines JS-generierten DIVs herauszufinden:

document.write('<input type="button" value="update layouts"
		onclick="javascript:updateLayouts()" />');

function updateLayouts()
{
	var container = document.getElementById("fwikiadmin_settingsContainer");

	if(!document.getElementById("updateLayoutsMsgBox"))
	{
		var msgBox = document.createElement("div");
		msgBox.setAttribute("id","updateLayoutsMsgBox");
		//msgBox.style.setAttribute("height","20", false);
		msgBox.appendChild(document.createTextNode("initializing..."));

		container.appendChild(msgBox);
		resizeDivTo("updateLayoutsMsgBox", 20);
	}

}

function resizeDivTo(div_id, div_height)
{
	var div = document.getElementById(div_id);

	alert(div.style.getAttribute("height", false));
	
}

Ergebnis: Kein alert. Wenn ich die Kommentierte zeile ent-kommentiere kommt nicht ein mal ein "initialize...". Woran liegt's bzw. wie funktioniert's richtig?

MfG

Luke

[Jesseblue]

Versuch es mal mit:
div.offsetHeight (gibt's natürlich auch in der width Version)

Gibt dir die gerenderte Höhe wieder.

[wahsaga]

Re: [JavaScript] Höhe eines DIVs herausfinden

setAttribute ist im IE oftmals kritisch - also sollte man es wo immer möglich vermeiden.
Und hier geht der Zugriff auf die height-Eigenschaft des style-Objektes doch eh viel einfacher.

Und außerdem erfordert eine Längenangabe ungleich Null in CSS immer was?

[Luke]

>Und außerdem erfordert eine Längenangabe ungleich Null in CSS immer was?
px

>Und hier geht der Zugriff auf die height-Eigenschaft des style-Objektes doch eh viel einfacher.
Gut, wusste ich nicht.

Jetzt stehe ich aber vor einem neuen Problem: Kann man Attribute abfragen die nicht explizit gesetzt wurden? Genauer gesagt will ich die line-height wissen

[Luke]

Um es kurz zu machen: Ich will so ein DIV ScrollDown ScrollUp wie auf http://moofx.mad4milk.net/ (man klicke auf Introduction, Documentation, etc). Wichtig dabei: Egal wie groß die Schriftgröße ist (und vermutlich auch die Textmenge) er expandiert immer auf die richtige Höhe; Wie mache ich das?

PS: Ich steig durch den MooFX Code nicht durch, sonst würd ich ja daraus schlau...

[wahsaga]

Original geschrieben von Luke
>Und außerdem erfordert eine Längenangabe ungleich Null in CSS immer was?
px

Nein.

Jetzt stehe ich aber vor einem neuen Problem: Kann man Attribute abfragen die nicht explizit gesetzt wurden? Genauer gesagt will ich die line-height wissen

Hab ich erst gestern (wieder mal) erklärt.

wie auf http://moofx.mad4milk.net/ (man klicke auf Introduction, Documentation, etc).

Man(n) hat geklickt, und bekommt lediglich einen Javascriptfehler angezeigt.

[Jesseblue]

Ist eigentlich recht einfach:
Man nehme eine Schere, Klebstift und 3 <div>-Elemente.

Das erste <div>-Element legt man vor sich hin, es dient als Grundfläche. Das zweite <div> schneidet man sich zurecht und klebt es oben auf das erste <div>. Dieses dient als Titlebar.
Nun legt man das letzte <div> Element einfach unter das Titlebar-<div>, klebt es fest und schreibt dort munter, runter.

Desto mehr Text in dem letzten <div> steht, desto weiter dehnt es sich nach unten hin aus. Somit haben wir die Dynamik.
Wenn ein Bereich minimiert wird, dann schneidet man sich den Content aus, legt ihn bei Seite und verschiebt alle weiteren Bereiche um den ausgeschnittenen Bereich wieder hoch.

Die Animation kriegt man dadurch zur Stande, dass man in zeitlichen Intervallen um eine bestimmte Schrittweite das Ganze bewegt.

That's it... *seine verklebten Finger waschen geht und die Schere bei Seite legt*

[Luke]

LOL, aber ich verstehe nicht ganz wie du das 'aufscrollen' auf die richtige höhe hinkriegst. Es können unterschiedliche Texte in dem DIV stehen mit unterschiedlichen Fonts.

>Man(n) hat geklickt, und bekommt lediglich einen Javascriptfehler angezeigt.

Krass. Unter Windows-Firefox (letzte Version) geht's.

Zu computedStyle finde ich, genau wie mein Vorgänger, nichts vernünftiges...


Es gibt doch aber sicher ne andere Methode als das Herausfinden der gerenderten DIV-Höhe und der entsprechenden Angabe beim Scroll-Effekt

[wahsaga]

Original geschrieben von Luke
Es gibt doch aber sicher ne andere Methode als das Herausfinden der gerenderten DIV-Höhe und der entsprechenden Angabe beim Scroll-Effekt

Wozu?
Hältst du das nicht für die simpelste und einfachste?
Also ich schon.

[Luke]

>Hältst du das nicht für die simpelste und einfachste?
Nicht so lang ich nicht weiß wie's geht

[Jesseblue]

Dem kann ich nur beipflichten *wahsaga zunickt*

try {
www.selfhtml.org
} catch (UnnecessaryQuestion************ception e) {
www.selfhtml.org
}

[wahsaga]

Original geschrieben von Luke
Nicht so lang ich nicht weiß wie's geht

Tja, dann würde ich mal vorschlagen, die Antworten aufmerksamer zu lesen - wie du an die effektive Höhe eines Elements kommst, würde dir ja bereits gesagt.


Und bitte nutze endlich mal die [quote]-Tags zum zitieren.

[Luke]

wie du an die effektive Höhe eines Elements kommst, würde dir ja bereits gesagt.

Gut, stimmt, verstehe noch nicht ganz wie, aber es funktioniert.

<strike>Hast du oder jemand vielleicht noch irgend ne quelle am start die getComputedStyle erklärt?</strike>

Wofür ist der 2te Parameter bei getComputedStyle?

[Jesseblue]

Irgendwie ist das wohl ein Coder-Tabu. Hab gestern ne Weile gegooglet, aber nur Forenbeiträge zu em Thema gefunden. Von vernünfiger Dokumentations war das alles weit entfernt.

Musst aber noch darauf achten, das Firefox getComputedStyle kennt, und der IE dafür currentStyle.
Ist alles irgendwie blöd... aber machbar.

Aber für dein Vorhaben solltest doch eigentlich darauf verzichten können. Da reicht doch element.offsetHeight und element.offsetWidth vollkommen aus (natürlich net '+ "px" ' vergessen, wenn du damit Grössen setzt! Sonst mekert der Firefox - zurecht).

[Luke]

Die sagen mir aber 2 unterschiedliche Werte. Egal. Muss passen! Danke!