HTMLSourceElement.height — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSourceElement.height

Beschreibung

Die Eigenschaft height von HTMLSourceElement ist eine nicht-negative Ganzzahl (unsigned long). Sie gibt die Höhe der Bildressource in CSS-Pixeln an und entspricht direkt dem HTML-Attribut height des <source>-Elements. Beim Lesen erhältst du den Attributwert als Zahl, beim Schreiben wird das Attribut aktualisiert.

Wirkung hat die Eigenschaft nur, wenn das <source>-Element in einem <picture>-Element steht. Dort kann jede Quelle eigene Abmessungen haben, zum Beispiel für Art Direction: Mobil ein Hochformat, am Desktop ein Querformat. Der Browser leitet aus width und height der ausgewählten Quelle das Seitenverhältnis ab und reserviert den Platz schon, bevor das Bild geladen ist. So werden Layoutverschiebungen (Cumulative Layout Shift) vermieden.

Steht <source> in einem <video>- oder <audio>-Element, ist das Attribut laut Spezifikation nicht erlaubt und wird ignoriert. Fehlt das Attribut, liefert die Eigenschaft 0.

Parameter

Name	Typ	Default	Beschreibung
$value	number	0	Nur beim Setzen: neue Höhe in CSS-Pixeln als nicht-negative Ganzzahl. Wird als `height`-Attribut in das Markup geschrieben.

Rückgabewert

Typ

number

Beschreibung

Die Höhe der Bildressource in CSS-Pixeln als nicht-negative Ganzzahl. Fehlt das Attribut oder ist es ungültig, ist der Wert 0.

Beispiele

Höhe einer Quelle auslesen

// HTML:
// <picture>
//   <source id="mobil" media="(max-width: 600px)" srcset="hoch.jpg" width="400" height="600">
//   <img src="quer.jpg" width="1200" height="675" alt="Landschaft">
// </picture>

const source = document.querySelector('#mobil');
console.log(source.height);
console.log(typeof source.height);

600 "number"

Abmessungen dynamisch setzen (Art Direction per JavaScript)

const picture = document.createElement('picture');

const source = document.createElement('source');
source.media = '(max-width: 600px)';
source.srcset = 'produkt-hoch.webp';
source.type = 'image/webp';
source.width = 400;
source.height = 600; // Seitenverhältnis 2:3 für Mobilgeräte

const img = document.createElement('img');
img.src = 'produkt-quer.jpg';
img.width = 1200;
img.height = 675;
img.alt = 'Produktfoto';

picture.append(source, img);
document.body.append(picture);

console.log(source.outerHTML);

Fehlende Abmessungen aufspüren (CLS-Prüfung)

const ohneMasse = [...document.querySelectorAll('picture > source')]
  .filter((s) => s.width === 0 || s.height === 0)
  .map((s) => s.srcset);

if (ohneMasse.length > 0) {
  console.warn('Quellen ohne width/height:', ohneMasse);
} else {
  console.log('Alle Quellen haben Abmessungen.');
}

Quellen ohne width/height: ["banner-klein.jpg"]

// Wichtig · Fallstricke

Nur in <picture> wirksam: In <video> oder <audio> wird height ignoriert. Die Größe eines Videos steuerst du über HTMLVideoElement.height.
Keine tatsächliche Bildhöhe: Die Eigenschaft gibt nur den Attributwert zurück, nicht die Pixelhöhe der geladenen Datei. Die echte Größe liefern HTMLImageElement.naturalHeight bzw. die gerenderte Größe img.getBoundingClientRect().
Werte ohne Einheit: Erlaubt sind nur Ganzzahlen in CSS-Pixeln. Angaben wie "50%" oder "10em" werden nicht als solche übernommen. Negative oder zu große Werte werden nach den Regeln für unsigned long auf 0 gesetzt.
Immer beide Maße angeben: Der Browser kann das Seitenverhältnis nur berechnen, wenn width und height gesetzt sind. Setze in CSS zusätzlich height: auto, damit das Bild responsiv bleibt.
Kompatibilität: width/height auf <source> werden seit Chrome/Edge 90, Safari 15 und Firefox 108 unterstützt. Ältere Browser ignorieren das Attribut und nehmen die Maße des <img>-Elements. Das ist ein harmloser Rückfall.

Siehe auch

HTMLSourceElement.media HTMLSourceElement.sizes HTMLSourceElement.srcset HTMLSourceElement.width HTMLSourceElement.src