DOMRect.height — Eigenschaft · JavaScript-Referenz

Signatur

DOMRect.height

Beschreibung

Die Eigenschaft height eines DOMRect enthält die Höhe des Rechtecks als double, also als Gleitkommazahl in CSS-Pixeln. Anders als bei DOMRectReadOnly kann der Wert bei DOMRect auch geschrieben werden. Dann ändern sich die abgeleiteten Eigenschaften bottom bzw. top automatisch mit, weil sie sich aus y und height berechnen.

In der Praxis bekommst du ein DOMRect meistens über Element.getBoundingClientRect(), Range.getBoundingClientRect() oder als Eintrag von getClientRects(). Die Höhe umfasst dabei den Rahmenkasten des Elements (Inhalt, padding und border) und berücksichtigt auch CSS-Transformationen wie scale(). Genau darin liegt der Unterschied zu offsetHeight: Dieses liefert eine gerundete Ganzzahl und ignoriert Transformationen.

Typische Einsatzfälle sind Layout-Berechnungen wie das Positionieren von Tooltips und Popovers, das Messen von Textzeilen, virtuelles Scrollen oder die Kollisionsprüfung. Wird ein DOMRect von Hand mit new DOMRect(x, y, width, height) erzeugt, darf height negativ sein. Das Rechteck erstreckt sich dann von y aus nach oben.

Parameter

Name	Typ	Default	Beschreibung
$value	number		Nur beim Schreiben: neue Höhe in CSS-Pixeln. Nicht-numerische Werte werden in eine Zahl umgewandelt (z. B. `"50"` → `50`). Das funktioniert nur bei `DOMRect`, nicht bei `DOMRectReadOnly`.

Rückgabewert

Typ

number

Beschreibung

Die Höhe des Rechtecks als Gleitkommazahl (double) in CSS-Pixeln. Bei Rechtecken aus getBoundingClientRect() ist der Wert nie negativ, bei selbst erzeugten Rechtecken kann er negativ sein.

Beispiele

Höhe eines Elements inklusive Nachkommastellen messen

const box = document.querySelector('.card');
const rect = box.getBoundingClientRect();

console.log(`Höhe: ${rect.height}px`);
console.log(`offsetHeight: ${box.offsetHeight}px`);

Höhe: 120.5px offsetHeight: 121px

Tooltip unterhalb eines Buttons positionieren

const button = document.querySelector('#hilfe');
const tooltip = document.querySelector('#tooltip');

const showTooltip = () => {
  const { left, top, height } = button.getBoundingClientRect();
  // 8px Abstand unter dem Button, Scroll-Position einrechnen
  tooltip.style.left = `${left + window.scrollX}px`;
  tooltip.style.top = `${top + height + 8 + window.scrollY}px`;
  tooltip.hidden = false;
};

button.addEventListener('mouseenter', showTooltip);

Höhe eines eigenen DOMRect ändern – bottom passt sich an

const rect = new DOMRect(10, 20, 100, 50);
console.log(rect.height, rect.bottom);

rect.height = 80;
console.log(rect.height, rect.bottom);

50 70 80 100

Negative Höhe: top und bottom werden vertauscht

const rect = new DOMRect(0, 100, 50, -40);

console.log(rect.height); // -40
console.log(rect.top);    // min(y, y + height)
console.log(rect.bottom); // max(y, y + height)

// Robuste, stets positive Höhe:
console.log(Math.abs(rect.height));

-40 60 100 40

// Wichtig · Fallstricke

Keine Rückwirkung auf das DOM: Wenn du height an einem von getBoundingClientRect() gelieferten Rechteck änderst, änderst du nur eine Momentaufnahme. Das Element selbst bleibt unverändert. Für echte Größenänderungen nutzt du element.style.height.
Negative Werte: Bei selbst erzeugten Rechtecken kann height negativ sein. Für Berechnungen greifst du dann besser auf bottom - top oder Math.abs(height) zurück.
Transformationen: height berücksichtigt transform (z. B. scale(2) verdoppelt den Wert), offsetHeight und clientHeight dagegen nicht.
Performance: Wer getBoundingClientRect() abfragt, erzwingt ein synchrones Layout (Reflow). Lese- und Schreibzugriffe aufs DOM solltest du deshalb bündeln. Für laufende Größenbeobachtung ist ResizeObserver besser geeignet.
Versteckte Elemente: Bei Elementen mit display: none ist height immer 0.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Im alten Internet Explorer fehlten width und height im ClientRect. Dort musste man bottom - top rechnen.

Siehe auch

DOMRect DOMRect.width DOMRectReadOnly.bottom Element.getBoundingClientRect() HTMLElement.offsetHeight ResizeObserver ImageData.height