Signatur
Beschreibung
Die Eigenschaft height des HTMLInputElement gehört zum HTML-Attribut height. Sie hat nur bei grafischen Absende-Schaltflächen eine Wirkung, also bei <input type="image">. Bei allen anderen Eingabetypen wie text, checkbox oder range wird das Attribut ignoriert.
Beim Lesen eines Bild-Buttons geben Browser in der Regel die tatsächlich dargestellte Höhe in CSS-Pixeln zurück. Das ist eine vorzeichenlose Ganzzahl. Wird das Element nicht dargestellt, etwa wegen display: none, fällt der Wert auf das Attribut height oder die natürliche Bildhöhe zurück. Ist kein Bild verfügbar, ist der Wert 0. Bei anderen Eingabetypen liefert die Eigenschaft meist 0.
Beim Schreiben setzt die Eigenschaft das Inhaltsattribut height. Der Browser skaliert das Bild dann auf diese Höhe. Wenn width nicht gesetzt ist, bleibt das Seitenverhältnis erhalten. Die Angabe von width und height im HTML ist außerdem nützlich, weil der Browser so schon vor dem Laden des Bildes Platz reserviert. Das verhindert Layout-Verschiebungen (CLS).
Für reine Gestaltungsfragen ist CSS (style.height) meist besser geeignet. height ist vor allem dann sinnvoll, wenn die Abmessungen als Teil des Markups gelten oder ausgelesen werden sollen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | Beim Setzen: neue Höhe in CSS-Pixeln als nicht-negative Ganzzahl. Der Wert wird in das Attribut height geschrieben. |
Rückgabewert
image oder ohne verfügbares Bild meist 0.Beispiele
Höhe eines Bild-Buttons auslesen
// HTML: <input type="image" id="senden" src="senden.png" alt="Absenden" width="120" height="40">
const button = document.querySelector('#senden');
console.log(button.height); // dargestellte Höhe
console.log(button.getAttribute('height')); // Attributwert als StringHöhe per Skript ändern (z. B. für Touch-Geräte)
const button = document.querySelector('input[type="image"]');
// Auf Geräten mit grobem Zeiger (Touch) den Button vergrößern
if (matchMedia('(pointer: coarse)').matches) {
button.height = 64;
}
console.log(button.getAttribute('height'));Wirkungslos bei anderen Eingabetypen
const textfeld = document.createElement('input');
textfeld.type = 'text';
textfeld.height = 50;
// Das Attribut wird gesetzt, hat aber keine Wirkung auf die Darstellung
console.log(textfeld.getAttribute('height'));
console.log(textfeld.height);
// Richtig für Textfelder: CSS verwenden
textfeld.style.height = '50px';Warten, bis das Bild geladen ist
const button = document.createElement('input');
button.type = 'image';
button.alt = 'Suchen';
button.src = '/icons/lupe.png';
document.body.append(button);
button.addEventListener('load', () => {
// Erst jetzt ist die natürliche/dargestellte Höhe bekannt
console.log(`Höhe: ${button.height}px`);
}, { once: true });// Wichtig · Fallstricke
- Nur für
type="image": Bei allen anderen Eingabetypen wird das Attribut gespeichert, beeinflusst die Darstellung aber nicht. Für die Größe dieser Felder CSS verwenden. - Lesen ist nicht dasselbe wie der Attributwert: Der Getter liefert meist die dargestellte Höhe. Wenn CSS die Größe überschreibt, weicht
input.heightvongetAttribute('height')ab. - Vor dem Laden: Solange das Bild noch lädt und kein
height-Attribut gesetzt ist, kann der Wert0sein. Auf das Ereignisloadwarten. - Keine Einheiten: Nur Ganzzahlen in Pixeln. Prozentangaben wie
"50%"sind nicht vorgesehen. Negative oder ungültige Werte werden wie beim Attribut behandelt, also ignoriert oder auf0gesetzt. - Layout-Stabilität: Wenn
width/heightim HTML stehen, kann der Browser vor dem Bildladen Platz reservieren. Das reduziert Layout-Verschiebungen. - Kompatibilität: Wird von allen gängigen Browsern seit Langem unterstützt. Die Rückgabe bei nicht dargestellten Elementen kann sich zwischen den Engines leicht unterscheiden.