DOMRectReadOnly.height — Eigenschaft · JavaScript-Referenz

Signatur

DOMRectReadOnly.height

Beschreibung

Die Eigenschaft height gibt die Höhe des Rechtecks als Gleitkommazahl in CSS-Pixeln zurück. Sie ist schreibgeschützt: Zuweisungen werden im nicht-strikten Modus stillschweigend ignoriert. Im Strict Mode lösen sie einen TypeError aus, weil nur ein Getter existiert. Wenn du die Höhe ändern willst, nimm die veränderbare Unterklasse DOMRect.

In der Praxis kommt dir height meist über Objekte unter, die der Browser liefert, zum Beispiel über Element.getBoundingClientRect(), ResizeObserverEntry.contentRect oder IntersectionObserverEntry.boundingClientRect. Damit misst du, wie hoch ein Element tatsächlich gerendert wird, etwa für Layout-Berechnungen, Animationen, virtuelles Scrollen oder die Positionierung von Tooltips.

Anders als top und bottom wird height nicht normalisiert. Das Rechteck wird über Ursprung (x/y) und Ausdehnung (width/height) definiert. Eine negative Höhe bedeutet, dass sich das Rechteck vom Ursprung aus nach oben erstreckt. getBoundingClientRect() liefert allerdings nie negative Werte.

Rückgabewert

Typ

number

Beschreibung

Die Höhe des Rechtecks in CSS-Pixeln als Gleitkommazahl (Double). Der Wert kann Nachkommastellen haben und negativ sein.

Beispiele

Rechteck erzeugen und Höhe auslesen

const rect = new DOMRectReadOnly(10, 20, 300, 150);
console.log(rect.height);

// Negative Höhe: Das Rechteck erstreckt sich nach oben
const umgedreht = new DOMRectReadOnly(0, 100, 50, -40);
console.log(umgedreht.height, umgedreht.top, umgedreht.bottom);

150 -40 60 100

Gerenderte Höhe eines Elements messen

const box = document.querySelector('.card');
const { height } = box.getBoundingClientRect();

// Nachkommastellen sind möglich, z. B. 123.5
console.log(`Karte ist ${Math.round(height)}px hoch`);

Karte ist 124px hoch

Höhenänderungen mit ResizeObserver verfolgen

const panel = document.querySelector('#panel');

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const h = entry.contentRect.height; // DOMRectReadOnly
    panel.classList.toggle('kompakt', h < 200);
    console.log('Neue Inhaltshöhe:', h);
  }
});

observer.observe(panel);

Neue Inhaltshöhe: 240

Schreibschutz im Strict Mode

'use strict';
const rect = new DOMRectReadOnly(0, 0, 100, 50);
try {
  rect.height = 999;
} catch (err) {
  console.log(err instanceof TypeError); // true
}

// Veränderbare Alternative
const editierbar = DOMRect.fromRect(rect);
editierbar.height = 999;
console.log(rect.height, editierbar.height);

true 50 999

// Wichtig · Fallstricke

Negative Werte: Wenn du Rechtecke selbst erzeugst, kann height negativ sein. Für eine sichere Ausdehnung verwende Math.abs(rect.height) oder rect.bottom - rect.top.
Transformationen: getBoundingClientRect().height berücksichtigt CSS-Transformationen wie scale() oder rotate() und liefert die Höhe der umschließenden Box. offsetHeight ignoriert Transformationen und ist immer ganzzahlig gerundet.
Box-Modell: Bei getBoundingClientRect() gehören Padding und Rahmen zur Höhe. ResizeObserverEntry.contentRect enthält dagegen nur die Inhaltsbox.
Performance: Wer getBoundingClientRect() ausliest, erzwingt ein synchrones Layout (Reflow). Messungen gehören nicht in Schleifen, in denen gleichzeitig Stile geschrieben werden. Um Layout-Thrashing zu vermeiden, erst alle Werte lesen und dann schreiben, oder ResizeObserver nutzen.
Kompatibilität: In allen modernen Browsern verfügbar. Der Konstruktor new DOMRectReadOnly() fehlt in sehr alten Browsern wie dem Internet Explorer. Dort liefert getBoundingClientRect() ein ClientRect ohne x/y; height ist vorhanden.
Ausgeblendete Elemente (display: none) haben die Höhe 0.

Siehe auch

DOMRectReadOnly DOMRectReadOnly.width DOMRectReadOnly.top DOMRectReadOnly.bottom DOMRect Element.getBoundingClientRect() ResizeObserver