DOMRect.fromRect() — Methode · JavaScript-Referenz

Signatur

DOMRect.fromRect(rect)

Beschreibung

DOMRect.fromRect() ist eine statische Fabrikmethode. Sie erzeugt ein neues DOMRect aus einem beliebigen Objekt, das dem Wörterbuch DOMRectInit entspricht. Das kann ein einfaches Objektliteral wie { x: 10, y: 20, width: 100, height: 50 } sein, aber auch ein vorhandenes DOMRect oder DOMRectReadOnly, etwa der Rückgabewert von getBoundingClientRect().

Besonders nützlich ist die Methode, um eine unabhängige, veränderbare Kopie eines Rechtecks anzulegen. Du kannst diese Kopie verschieben oder in der Größe ändern, ohne das Original anzufassen. Außerdem lassen sich damit reine Datenobjekte, zum Beispiel aus JSON oder einem Zustandsspeicher, in echte DOMRect-Instanzen umwandeln. Diese bringen dann die abgeleiteten Eigenschaften top, right, bottom und left mit.

Fehlende Eigenschaften im übergebenen Objekt werden als 0 behandelt. Rufst du die Methode ganz ohne Argument auf, erhältst du ein Rechteck mit lauter Nullen. Die Methode liest nur x, y, width und height. Werte wie top oder left im Eingabeobjekt werden ignoriert.

Parameter

Name	Typ	Default	Beschreibung
$rect	DOMRectInit \| DOMRect \| DOMRectReadOnly \| Object	{}	Objekt mit den optionalen Zahleneigenschaften `x`, `y`, `width` und `height` (jeweils Standardwert `0`).

Rückgabewert

Typ

DOMRect

Beschreibung

Ein neues DOMRect mit den übergebenen Werten für Position und Größe. Es ist unabhängig vom Eingabeobjekt.

Beispiele

Rechteck aus einem Objektliteral erzeugen

const rect = DOMRect.fromRect({ x: 10, y: 20, width: 200, height: 100 });

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

10 20 210 120

Veränderbare Kopie von getBoundingClientRect()

const box = document.querySelector('#karte');
const original = box.getBoundingClientRect();

// Kopie anlegen und um 8 px nach allen Seiten vergrößern
const gepolstert = DOMRect.fromRect(original);
gepolstert.x -= 8;
gepolstert.y -= 8;
gepolstert.width += 16;
gepolstert.height += 16;

console.log(original === gepolstert); // false
console.log(gepolstert.width - original.width);

false 16

Gespeicherte Daten wieder in ein DOMRect umwandeln

const json = '{"x":50,"y":30,"width":120,"height":80}';
const rect = DOMRect.fromRect(JSON.parse(json));

const enthaeltPunkt = (r, px, py) =>
  px >= r.left && px <= r.right && py >= r.top && py <= r.bottom;

console.log(rect instanceof DOMRect);
console.log(enthaeltPunkt(rect, 100, 60));
console.log(JSON.stringify(rect.toJSON()));

true true {"x":50,"y":30,"width":120,"height":80,"top":30,"right":170,"bottom":110,"left":50}

Aufruf ohne Argument und mit Teilwerten

console.log(DOMRect.fromRect().width);
console.log(DOMRect.fromRect({ width: 40 }).right);

0 40

// Wichtig · Fallstricke

Negative Größen: width und height dürfen negativ sein. Dann ist left kleiner als x bzw. top kleiner als y. Verlass dich deshalb für Kanten auf left/top/right/bottom und nicht auf x/y.
Werte wie top oder left werden ignoriert: Ein Objekt wie { top: 10, left: 5 } ergibt ein Rechteck bei (0, 0).
Keine Live-Bindung: Das Ergebnis ist eine Momentaufnahme. Verschiebt sich das Element nach Scrollen oder Layout-Änderungen, musst du getBoundingClientRect() erneut aufrufen.
Unterschied zum Konstruktor: new DOMRect(x, y, width, height) nimmt einzelne Zahlen entgegen, fromRect() dagegen ein Objekt. Für ein unveränderliches Ergebnis nimmst du DOMRectReadOnly.fromRect().
Kompatibilität: Wird in Chrome/Edge 61+, Firefox 69+ und Safari 10.1+ unterstützt. In Node.js gibt es die Methode nicht, weil DOMRect eine reine Browser-API ist (nur über Bibliotheken wie jsdom teilweise verfügbar).

Siehe auch

DOMRect DOMRectReadOnly.fromRect() DOMRectReadOnly Element.prototype.getBoundingClientRect() DOMRectReadOnly.prototype.toJSON() new PresentationRequest()