ResizeObserverEntry

Das ResizeObserverEntry-Interface repräsentiert das Objekt, das an die Rückruffunktion des Konstruktors ResizeObserver() übergeben wird, wodurch Sie Zugriff auf die neuen Dimensionen des überwachten Element oder SVGElement erhalten.

Instanzeigenschaften

ResizeObserverEntry.borderBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe der Rahmenbox des beobachteten Elements enthält, wenn der Rückruf ausgeführt wird.

ResizeObserverEntry.contentBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe der Inhaltsbox des beobachteten Elements enthält, wenn der Rückruf ausgeführt wird.

ResizeObserverEntry.devicePixelContentBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe der Inhaltsbox in Gerätepixeln des beobachteten Elements enthält, wenn der Rückruf ausgeführt wird.

ResizeObserverEntry.contentRect Schreibgeschützt

Ein DOMRectReadOnly-Objekt, das die neue Größe des beobachteten Elements enthält, wenn der Rückruf ausgeführt wird. Beachten Sie, dass dies jetzt eine veraltete Eigenschaft ist, die nur aus Gründen der Abwärtskompatibilität in der Spezifikation beibehalten wird.

ResizeObserverEntry.target Schreibgeschützt

Eine Referenz auf das beobachtete Element oder SVGElement.

Instanzmethoden

Keine.

Beispiele

Das folgende Beispiel stammt aus dem resize-observer-text.html (Quellcode ansehen) Beispiel.

Beachten Sie, dass der Code drei verschiedene Kompatibilitätsfälle abdeckt:

• Einige alte Browser unterstützen möglicherweise contentRect, aber nicht contentBoxSize.
• Alte Versionen von Firefox unterstützen contentBoxSize, haben es aber fälschlicherweise als einzelnes Objekt statt als Array implementiert.
• Moderne Browser unterstützen contentBoxSize als ein Array von Objekten, um die Größen der Boxen für fragmentierte Elemente (zum Beispiel in einem Mehrspaltenszenario) melden zu können.

const resizeObserver = new ResizeObserver((entries) => {
 for (const entry of entries) {
 if (entry.contentBoxSize) {
 // The standard makes contentBoxSize an array...
 if (entry.contentBoxSize[0]) {
 h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200)}rem`;
 pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize[0].inlineSize / 600)}rem`;
 } else {
 // ... but old versions of Firefox treat it as a single item
 h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize.inlineSize / 200)}rem`;
 pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize.inlineSize / 600)}rem`;
 }
 } else {
 h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`;
 pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
 }
 }
 console.log("Size changed");
});
resizeObserver.observe(divElem);

Spezifikationen

Browser-Kompatibilität