HTMLInputElement.width — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.width

Beschreibung

Die Eigenschaft width von HTMLInputElement gehört zum HTML-Attribut width. Sinnvoll ist sie nur bei Grafik-Buttons, also bei <input type="image">. Dort legt sie fest, wie breit das Bild angezeigt wird, mit dem das Formular abgeschickt wird.

Beim Lesen bekommst du laut HTML-Spezifikation eine ganze Zahl in CSS-Pixeln:

die tatsächlich dargestellte Breite, wenn das Bild gerendert wird,
die natürliche Breite des Bildes, wenn es geladen ist, aber nicht angezeigt wird (z. B. bei display: none),
0, wenn kein Bild verfügbar ist, etwa weil es noch lädt, der Pfad falsch ist oder das Feld kein type="image" hat.

Beim Schreiben wird das Inhaltsattribut width gesetzt. Der Browser zeigt das Bild dann in dieser Breite an. Ist nur die Breite angegeben und nicht die Höhe, skaliert der Browser die Höhe meist im passenden Seitenverhältnis.

Mit der Breite von Textfeldern hat die Eigenschaft nichts zu tun. Wie breit ein <input type="text"> ist, bestimmst du mit CSS (width) oder mit dem Attribut size (Anzahl der Zeichen).

Parameter

Name	Typ	Default	Beschreibung
$value	number		Nur beim Schreiben: neue Breite in CSS-Pixeln als nicht-negative ganze Zahl. Sie wird in das Attribut `width` übernommen.

Rückgabewert

Typ

number

Beschreibung

Die dargestellte bzw. natürliche Breite des Bildes in CSS-Pixeln als ganze Zahl (unsigned long). 0, wenn kein Bild verfügbar ist.

Beispiele

Breite eines Grafik-Buttons auslesen

// HTML: <input type="image" id="senden" src="senden.png" alt="Absenden" width="120">
const button = document.querySelector('#senden');

// Erst nach dem Laden des Bildes ist ein sinnvoller Wert sicher
button.addEventListener('load', () => {
  console.log(`Breite: ${button.width}px`);
});

Breite: 120px

Breite zur Laufzeit ändern

const button = document.querySelector('input[type="image"]');

// Auf kleinen Bildschirmen einen kleineren Button anzeigen
const anpassen = () => {
  button.width = window.matchMedia('(max-width: 600px)').matches ? 80 : 160;
  console.log(button.getAttribute('width'));
};

anpassen();
window.addEventListener('resize', anpassen);

160

Bei anderen Feldtypen liefert width 0

const textfeld = document.createElement('input');
textfeld.type = 'text';
textfeld.setAttribute('width', '300');

// Kein Bild vorhanden, daher 0
console.log(textfeld.width);
// Für Textfelder stattdessen CSS oder size verwenden
textfeld.style.width = '300px';
textfeld.size = 30;

// Wichtig · Fallstricke

Nur für type="image": Bei allen anderen Typen liefert der Getter 0, auch wenn ein Attribut width gesetzt ist.
Timing: Liest du die Eigenschaft, bevor das Bild geladen ist, bekommst du oft 0. Deshalb auf das Ereignis load warten.
Dargestellte Breite: Der Getter gibt die Breite zurück, die tatsächlich angezeigt wird, also inklusive CSS-Einfluss. Das kann vom Attributwert abweichen. Den reinen Attributwert erhältst du mit getAttribute('width').
Nicht-ganzzahlige oder negative Werte werden beim Setzen umgewandelt bzw. ignoriert. Übergib am besten nur ganze Zahlen ≥ 0.
Für responsive Layouts ist CSS (width, max-width) meist die bessere Wahl. Das Attribut ist trotzdem nützlich, damit der Browser vorab Platz für das Bild reserviert und das Layout beim Laden nicht springt.
Die Eigenschaft wird von allen gängigen Browsern seit langem unterstützt.

Siehe auch

HTMLInputElement.height HTMLInputElement.src HTMLInputElement.size HTMLImageElement.width HTMLInputElement HTMLEmbedElement.width HTMLInputElement.formMethod