new DOMRect() — Methode · JavaScript-Referenz

Signatur

new DOMRect(x, y, width, height)

Beschreibung

Mit new DOMRect() legst du selbst ein Rechteck-Objekt an. Es hat dieselbe Form wie die Rückgabewerte von Element.getBoundingClientRect() oder IntersectionObserverEntry.boundingClientRect. Du brauchst es, wenn du eigene Rechtecke für Geometrie-Berechnungen, Kollisionsprüfungen, Hilfsfunktionen oder Tests erzeugen willst, ohne dafür ein echtes DOM-Element zu vermessen.

Ein DOMRect erbt von DOMRectReadOnly. Die Eigenschaften x, y, width und height lassen sich schreiben. Die abgeleiteten Eigenschaften top, right, bottom und left sind nur lesbar. Sie werden jedes Mal aus den vier Grundwerten berechnet, sind also nach einer Änderung sofort aktuell.

Alle Parameter sind optional und stehen standardmäßig auf 0. Negative Breiten oder Höhen sind erlaubt. In dem Fall liefern left/top den kleineren und right/bottom den größeren Koordinatenwert.

Parameter

Name	Typ	Beschreibung
$x	number	X-Koordinate des Ursprungs (normalerweise die linke Kante).
$y	number	Y-Koordinate des Ursprungs (normalerweise die obere Kante).
$width	number	Breite des Rechtecks. Ein negativer Wert ist erlaubt.
$height	number	Höhe des Rechtecks. Ein negativer Wert ist erlaubt.

Rückgabewert

Typ

DOMRect

Beschreibung

Ein neues, veränderbares DOMRect-Objekt mit den übergebenen Werten.

Beispiele

Rechteck erzeugen und abgeleitete Kanten lesen

const rect = new DOMRect(10, 20, 200, 100);

console.log(rect.x, rect.y, rect.width, rect.height);
console.log(rect.left, rect.top, rect.right, rect.bottom);

10 20 200 100 10 20 210 120

Werte nachträglich ändern

const box = new DOMRect();
box.width = 50;
box.height = 30;
box.x = 5;

// right und bottom werden automatisch neu berechnet
console.log(box.right, box.bottom);

// box.right = 100; // bleibt ohne Wirkung (in Strict Mode: TypeError)

55 30

Kollisionsprüfung mit einem Element

const intersects = (a, b) =>
  a.left < b.right && a.right > b.left &&
  a.top < b.bottom && a.bottom > b.top;

// Sichtbarer Bereich als eigenes Rechteck
const viewport = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
const target = document.querySelector('#banner').getBoundingClientRect();

console.log(intersects(viewport, target) ? 'sichtbar' : 'außerhalb');

sichtbar

Aus einem Objekt erstellen und als JSON ausgeben

const rect = DOMRect.fromRect({ x: 0, y: 0, width: 16, height: 9 });
const neg = new DOMRect(100, 100, -40, -20);

console.log(JSON.stringify(rect));
console.log(neg.left, neg.right, neg.top, neg.bottom);

{"x":0,"y":0,"width":16,"height":9,"top":0,"right":16,"bottom":9,"left":0} 60 100 80 100

// Wichtig · Fallstricke

top, right, bottom und left sind reine Getter. Eine Zuweisung wird im Sloppy Mode stillschweigend ignoriert und löst im Strict Mode (auch in ES-Modulen) einen TypeError aus.
Mit dem Spread-Operator ({ ...rect }) erhältst du ein leeres Objekt, weil die Eigenschaften Getter auf dem Prototyp sind. Nutze stattdessen rect.toJSON() oder JSON.stringify(rect).
Die Werte sind Gleitkommazahlen. Bei Vergleichen können Rundungsabweichungen auftreten. Übergebene Werte werden in Zahlen umgewandelt (undefined ergibt 0).
getBoundingClientRect() bezieht sich auf den Viewport. Ein selbst erzeugtes Rechteck hat keinen eingebauten Bezug, auf welches Koordinatensystem es sich bezieht. Darum musst du dich selbst kümmern.
Kompatibilität: In allen modernen Browsern und in Web Workern verfügbar, nicht jedoch in Node.js ohne DOM-Umgebung (z. B. jsdom). Sehr alte Browser (Internet Explorer, alter Edge) kennen den Konstruktor nicht.

Siehe auch

DOMRect DOMRectReadOnly DOMRect.fromRect() Element.getBoundingClientRect() DOMPoint IntersectionObserverEntry new CSSMathProduct()