HTMLEmbedElement.height — Eigenschaft · JavaScript-Referenz

Signatur

HTMLEmbedElement.height

Beschreibung

Die Eigenschaft height des Interfaces HTMLEmbedElement spiegelt das HTML-Attribut height eines <embed>-Elements wider. Beim Lesen erhalten Sie den Attributwert als String. Beim Schreiben ändert sich das Attribut im DOM sofort, und der Browser zeichnet die eingebettete Ressource (z. B. ein PDF, SVG oder Video) in der neuen Höhe.

Der Wert gibt die Höhe in CSS-Pixeln an. Laut HTML-Spezifikation soll er eine nicht-negative ganze Zahl ohne Einheit sein, etwa "400". Weil die Eigenschaft ein einfacher String-Reflektor ist, gibt sie genau das zurück, was im Attribut steht. Ein Wert wie "50%" wird also nicht umgerechnet. Fehlt das Attribut, ist das Ergebnis ein leerer String "".

Nutzen Sie height, wenn Sie die im Markup vorgesehene Größe eines eingebetteten Inhalts per Skript lesen oder anpassen möchten, zum Beispiel bei einem PDF-Viewer, der mit dem Fenster mitwächst. Die tatsächlich gezeichnete Höhe hängt auch vom CSS ab. Sie lesen sie über offsetHeight oder getBoundingClientRect() aus.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: neue Höhe als String (z. B. `"300"`). Zahlen werden automatisch in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des height-Attributs als String oder "", wenn das Attribut fehlt.

Beispiele

Höhe eines eingebetteten PDFs auslesen

// <embed id="doc" src="handbuch.pdf" type="application/pdf" width="600" height="400">
const embed = document.getElementById('doc');
console.log(embed.height);
console.log(typeof embed.height);

400 string

Höhe dynamisch an das Fenster anpassen

const embed = document.querySelector('embed[type="application/pdf"]');

const resize = () => {
  // 80 % der Fensterhöhe, abgerundet auf ganze Pixel
  embed.height = String(Math.floor(window.innerHeight * 0.8));
};

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

Attributwert und gezeichnete Höhe vergleichen

const embed = document.createElement('embed');
embed.src = 'grafik.svg';
embed.type = 'image/svg+xml';
embed.height = 250;          // Zahl wird zu "250"
embed.style.height = '120px'; // CSS hat Vorrang bei der Darstellung
document.body.append(embed);

console.log(embed.height);                    // Attribut
console.log(embed.getAttribute('height'));
console.log(embed.offsetHeight);              // tatsächliche Höhe

250 250 120

Fehlendes Attribut erkennen

const embed = document.createElement('embed');
console.log(embed.height === '');

const h = Number.parseInt(embed.height, 10) || 150; // eigener Standardwert
console.log(h);

true 150

// Wichtig · Fallstricke

Immer ein String: Anders als bei HTMLImageElement.height (Typ number) liefert HTMLEmbedElement.height einen String zurück. Wenn Sie damit rechnen möchten, wandeln Sie den Wert zuerst mit Number() oder parseInt() um. Sonst entstehen leicht Fehler wie "400" + 10 === "40010".
Keine Prüfung des Werts: Der Browser speichert jeden String unverändert, zum Beispiel auch "abc" oder "50%". Ungültige Werte werden bei der Darstellung ignoriert oder unterschiedlich ausgelegt. Setzen Sie daher nur ganze Zahlen ohne Einheit.
CSS hat Vorrang: Eine CSS-Regel wie height im Stylesheet oder in style überschreibt das Attribut bei der Darstellung. Die tatsächlich gezeichnete Größe lesen Sie mit offsetHeight bzw. getBoundingClientRect().height aus.
Plugins: Früher lud <embed> oft Plugins wie Flash. Diese Plugins werden heute nicht mehr unterstützt. Für PDFs, SVGs und Medien funktioniert das Element weiterhin. Für Videos und Bilder sind oft <video>, <img> oder <iframe> besser geeignet.
Browser-Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari).

Siehe auch

HTMLEmbedElement.src HTMLEmbedElement.width HTMLEmbedElement.type HTMLImageElement.height HTMLVideoElement.height