Signatur
Beschreibung
Die schreibgeschützte Eigenschaft contentRect eines ResizeObserverEntry enthält die Abmessungen des beobachteten Elements nach einer Größenänderung. Sie ist ein DOMRectReadOnly mit den Eigenschaften width, height, x, y, top, left, right und bottom.
Bei normalen HTML-Elementen beschreibt contentRect die Inhaltsbox, also die Fläche ohne Padding, Rahmen und Scrollbalken. x und y entsprechen dabei dem linken bzw. oberen Padding. Bei SVG-Elementen wird stattdessen die Bounding Box (getBBox()) verwendet.
contentRect stammt aus der ersten Version der Spezifikation und ist in allen Browsern mit ResizeObserver-Unterstützung vorhanden. Die neueren Eigenschaften contentBoxSize, borderBoxSize und devicePixelContentBoxSize sind genauer, weil sie mit Schreibrichtungen umgehen können und mehrere Fragmente unterstützen. In neuem Code solltest du sie bevorzugen und contentRect als Ausweichlösung nutzen.
Rückgabewert
x/y entsprechen dem Padding oben/links, width/height der Inhaltsgröße.Beispiele
Größe eines Elements live anzeigen
const box = document.querySelector('#panel');
const label = document.querySelector('#size');
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
const { width, height } = entry.contentRect;
label.textContent = `${Math.round(width)} × ${Math.round(height)} px`;
}
});
observer.observe(box);Responsive Komponente per Container-Breite (Element Query)
const card = document.querySelector('.card');
const ro = new ResizeObserver(([entry]) => {
const { width } = entry.contentRect;
card.classList.toggle('card--compact', width < 400);
card.classList.toggle('card--wide', width >= 800);
});
ro.observe(card);Canvas an Containergröße anpassen, mit Fallback auf contentBoxSize
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const ro = new ResizeObserver(([entry]) => {
let width, height;
if (entry.contentBoxSize) {
// Neuere API: Array (in alten Firefox-Versionen ein einzelnes Objekt)
const size = Array.isArray(entry.contentBoxSize)
? entry.contentBoxSize[0]
: entry.contentBoxSize;
width = size.inlineSize;
height = size.blockSize;
} else {
({ width, height } = entry.contentRect);
}
const dpr = window.devicePixelRatio;
canvas.width = Math.round(width * dpr);
canvas.height = Math.round(height * dpr);
ctx.scale(dpr, dpr);
ctx.fillRect(0, 0, width / 2, height / 2);
});
ro.observe(canvas);Padding-Offset über x und y auslesen
const el = document.querySelector('#padded'); // CSS: padding: 10px 20px; box-sizing: border-box
new ResizeObserver(([entry]) => {
const r = entry.contentRect;
console.log(r.x, r.y, r.width, r.height);
}).observe(el);// Wichtig · Fallstricke
- Nur die Inhaltsbox:
contentRectenthält weder Padding noch Rahmen, auch nicht beibox-sizing: border-box. Für die äußere Größe nimmst duborderBoxSizeodergetBoundingClientRect(). - Keine Position im Viewport:
x/ysind der Padding-Offset und keine Seitenkoordinaten. Für die Position auf der Seite nutzt duelement.getBoundingClientRect(). - Transformationen werden ignoriert: Die Werte beziehen sich auf die Layoutgröße. CSS-
transformwiescale()fließt nicht ein. - Schreibrichtung:
width/heightsind physische Maße. Bei vertikalen Schreibrichtungen lieferncontentBoxSize.inlineSize/blockSizedie logischen Maße. - Endlosschleifen vermeiden: Wenn du im Callback die Größe des beobachteten Elements änderst, löst das neue Beobachtungen aus. Der Browser meldet dann „ResizeObserver loop completed with undelivered notifications“.
- Kompatibilität: Wird von Chrome 64+, Firefox 69+, Safari 13.1+ und Edge 79+ unterstützt.
contentRectist laut Spezifikation nur aus Gründen der Abwärtskompatibilität enthalten, bleibt aber voraussichtlich erhalten.