Javascript: Höhe eines submit-buttons ermitteln?

straesser

Hallo Freunde des Internets

ich habe eine Frage bezüglich Javascript. Und zwar habe ich in einem html-Formular mit einem Submit-Button, dessen Höhe sich je nach vorheriger Auswahl immer verändert.
Wie kann ich per Javascript-Funktion die aktuelle Höhe des Buttons erfassen, damit ich die Höhe des Hintergrunds des Formulars der Höhe des Buttons anpassen kann?

Der Name des Buttons ist "weiter" bzw. der Name des Formulars ist "fragebogen" und das ganze steht in einem DIV-Bereich.
Der DIV-Bereich wo die Hintergrundfarbe gesetzt wird heißt fragenBG.

Hiermit komme ich leider nicht weiter:
document.getElementById("fragenBG").style.height=(document.fragebogen.weiter.height+30);

Ronald

Moin!

Wenn es klappt (habs nicht getestet), dann muß es so gehen:

1. gib dem Button ebenfalls eine ID, z.B. "SB",
2. dann:

Code

document.getElementById("fragenBG").style.height = document.getElementById("SB").style.height + 30px;

Sollte klappen.

G.a.d.M.

Ronald

straesser

Danke für die schnelle Hilfe

..allerdings funktioniert das Ganze bei mir noch nicht so ganz.

Also dem Button ordne ich jetzt folgendermaßen die ID zu:
<input ID="button" type="submit" name="weiter" value="weiter">

Die Javascript-Funktion rufe ich in body auf:
<body onLoad="setHeight()">

Meine Funktion sieht jetzt folgendermaßen aus:
function setHeight(){
document.getElementById("fragenBG").style.height = document.getElementById("button").style.height + 30px;
}

Wenn ich der Funktion einen festen Wert zuweise, also z.B. document.getElementById("fragenBG").style.height = 700 , dann ist die Höhe des DIV-Bereichs fragenBG auch 700. Allerdings weißt er wenn ich wie oben auf den Button verweise keine Höhe zu.
Woran könnte das liegen? Habe ich evtl. einen generellen Fehler gemacht den jemand hier erkennen kann?

Ronald

So, ich hab mal ein wenig getestet.

Also:

Du kannst die Höhe des Button nur auslesen, wenn du sie vorher per CSS benannt hast. Allerdings ist das quatsch, denn wenn du selbst eine Höhe angegeben hast, dann ist diese dir ja bekannt und du brauchst sie nicht mehr auslesen.

Warum gehst du nicht den einfachen Weg und gibst dem Button per CSS eine feste Höhe? Dann entfällt das ganze Javagescripte und die HP sieht auch ohne aktiviertem Javascript gut aus.

Code

<input type="submit" style="height:25px; width:50px; line-height:23px" value="weiter">

G.a.d.M.

Ronald

Tags