Signatur
Beschreibung
Die Eigenschaft width spiegelt das HTML-Attribut width eines <iframe>-Elements wider. Sie ist ein String und kein Zahlwert. Beim Lesen erhältst du genau den Text, der im Attribut steht, zum Beispiel "640". Ist das Attribut nicht gesetzt, bekommst du einen leeren String "". Wenn du einen Wert zuweist, wird das Attribut sofort im DOM aktualisiert.
Laut HTML-Standard ist der Wert eine nicht-negative Ganzzahl, die als CSS-Pixel gilt. Browser werten zwar oft auch Prozentangaben wie "100%" aus, gültiges HTML ist das aber nicht. Fehlt das Attribut ganz, ist ein iframe standardmäßig 300 × 150 Pixel groß.
Typische Einsatzfälle sind eingebettete Inhalte wie Videos, Karten oder Widgets, deren Breite du per Skript anpassen willst. Ein Beispiel ist die Anpassung an die Größe des Inhalts nach dem Laden. Für responsive Layouts ist CSS (style.width, aspect-ratio) meist besser geeignet. CSS-Regeln haben nämlich Vorrang vor dem Attribut.
Rückgabewert
width-Attributs als String, z. B. "640". Ist das Attribut nicht gesetzt, ist es der leere String "". Beim Setzen wird der zugewiesene Wert in einen String umgewandelt und als Attribut gespeichert.Beispiele
Breite auslesen und setzen
const frame = document.createElement('iframe');
console.log(JSON.stringify(frame.width)); // Attribut fehlt
frame.width = 640; // Zahl wird zu String
frame.height = 360;
frame.src = 'https://example.com/';
document.body.append(frame);
console.log(frame.width, typeof frame.width);
console.log(frame.getAttribute('width'));Mit der Breite rechnen (Umwandlung in eine Zahl)
const video = document.querySelector('iframe.video');
// width ist ein String → vor dem Rechnen umwandeln
const width = Number.parseInt(video.width, 10) || 300; // 300 = Standardbreite
const height = Math.round(width * 9 / 16);
video.height = height;
console.log(`Seitenverhältnis 16:9 → ${width}×${height}`);Iframe an die Breite des Inhalts anpassen (gleicher Ursprung)
const frame = document.querySelector('#preview');
frame.addEventListener('load', () => {
// Funktioniert nur bei gleichem Ursprung (Same-Origin)
const doc = frame.contentDocument;
if (!doc) return;
const contentWidth = doc.documentElement.scrollWidth;
frame.width = String(contentWidth);
console.log('Neue Breite:', frame.width);
});Attribut-Breite vs. tatsächlich dargestellte Breite
const frame = document.querySelector('iframe');
frame.width = '800';
frame.style.width = '50%'; // CSS hat Vorrang vor dem Attribut
console.log('Attribut:', frame.width);
console.log('Gerendert:', frame.getBoundingClientRect().width);// Wichtig · Fallstricke
- String statt Zahl:
frame.width + 10ergibt z. B."64010". Wandle den Wert vorher mitNumber()oderparseInt()um. - Leerer String: Ohne Attribut ist der Wert
""und nicht"300". Die Standardgröße von 300 × 150 Pixeln lässt sich also nicht überwidthauslesen. Nutze dafürgetBoundingClientRect()oderoffsetWidth. - CSS hat Vorrang: Eine CSS-Regel wie
widthin einem Stylesheet oderstyle.widthüberschreibt das Attribut. Die Eigenschaft liefert dann nicht die tatsächlich dargestellte Breite. - Prozentwerte: Werte wie
"100%"werden gespeichert und von Browsern meist ausgewertet, sind laut HTML-Standard aber ungültig. Für flexible Layouts ist CSS die bessere Wahl. - Keine Einheiten: Werte wie
"640px"sind nicht vorgesehen. Die Browser werten sie zwar teilweise aus, schreib aber nur die reine Zahl. - Kompatibilität: Wird seit jeher von allen Browsern unterstützt.