Signatur
Beschreibung
Die Eigenschaft height des Interfaces HTMLObjectElement spiegelt das HTML-Attribut height eines <object>-Elements wider. Damit wird die Höhe festgelegt, in der die eingebettete Ressource angezeigt wird, zum Beispiel ein PDF, ein SVG oder ein anderes HTML-Dokument. Der Wert gilt in CSS-Pixeln.
Anders als HTMLImageElement.height ist der Wert hier ein String und keine Zahl. Beim Lesen bekommst du genau den Text, der im Attribut steht, zum Beispiel "300". Fehlt das Attribut, ist der Wert ein leerer String "". Wenn du einen Wert zuweist, wird das Attribut sofort im DOM aktualisiert.
Die Eigenschaft sagt nur etwas über das Attribut aus, nicht über die tatsächlich dargestellte Größe. Wird die Höhe per CSS überschrieben, bleibt height unverändert. Die wirklich dargestellte Höhe liefern offsetHeight, clientHeight oder getBoundingClientRect().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Nur beim Setzen: die neue Höhe als Zahl ohne Einheit in CSS-Pixeln, z. B. "400". Eine zugewiesene Zahl wird in einen String umgewandelt. |
Rückgabewert
height als String, oder "", wenn das Attribut fehlt.Beispiele
Höhe eines eingebetteten PDFs auslesen
// HTML: <object id="doc" data="handbuch.pdf" type="application/pdf" width="600" height="400"></object>
const doc = document.getElementById('doc');
console.log(doc.height); // Attributwert als String
console.log(typeof doc.height);
console.log(Number(doc.height) + 100); // in eine Zahl umwandeln, um damit zu rechnenHöhe dynamisch anpassen
const viewer = document.querySelector('object#doc');
// Viewer auf 80 % der Fensterhöhe setzen
const resizeViewer = () => {
viewer.height = String(Math.round(window.innerHeight * 0.8));
};
resizeViewer();
window.addEventListener('resize', resizeViewer);
console.log(viewer.getAttribute('height'));Attributwert und dargestellte Höhe vergleichen
const obj = document.createElement('object');
obj.data = 'grafik.svg';
obj.type = 'image/svg+xml';
obj.height = '200';
obj.style.height = '50px'; // CSS hat Vorrang bei der Darstellung
document.body.append(obj);
console.log(obj.height); // Attributwert
console.log(obj.offsetHeight); // tatsächlich dargestellte Höhe// Wichtig · Fallstricke
- Der Wert ist ein String: Ausdrücke wie
obj.height + 10hängen Text an (z. B."30010"). Wandle den Wert vorher mitNumber()oderparseInt()um. - Prozentangaben wie
"50%"werden zwar gespeichert, sind aber nach HTML5 nicht gültig. Für relative Größen besser CSS verwenden. - CSS-Regeln für
heighthaben Vorrang vor dem Attribut. Die Eigenschaft zeigt deshalb nicht unbedingt die tatsächlich dargestellte Größe. - Wird die Eigenschaft nie gesetzt, ist der Wert
""und nicht"0". Die Standardgröße des Elements (meist 150 px Höhe) wird hier nicht angezeigt. - Die Eigenschaft wird in allen gängigen Browsern seit Langem unterstützt.