ResizeObserverEntry: contentRect-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Die schreibgeschützte Eigenschaft contentRect der ResizeObserverEntry Schnittstelle gibt ein DOMRectReadOnly-Objekt zurück, das die neue Größe des beobachteten Elements enthält, wenn der Rückruf ausgeführt wird. Beachten Sie, dass dies besser unterstützt wird als ResizeObserverEntry.borderBoxSize oder ResizeObserverEntry.contentBoxSize, aber es ist ein Überbleibsel einer früheren Implementierung der Resize Observer API, wird aus Gründen der Web-Kompatibilität noch in der Spezifikation berücksichtigt und könnte in zukünftigen Versionen veraltet sein.

Wert

Ein DOMRectReadOnly-Objekt, das die neue Größe des durch die target-Eigenschaft angegebenen Elements enthält.

Wenn das target ein HTML-Element ist, ist das zurückgegebene contentRect der Inhaltsbereich des Elements. Wenn das target ein SVGElement ist, ist das zurückgegebene contentRect der Begrenzungsrahmen des SVG.

Beispiele

Das folgende Snippet stammt aus dem Beispiel resize-observer-text.html (siehe Quelle). Es verwendet einen einfachen Feature-Detection-Test, um zu überprüfen, ob der Browser die neuere ResizeObserverEntry.contentBoxSize-Eigenschaft unterstützt — falls ja, wird diese verwendet, um die benötigten Größeninformationen zu erhalten. Ist dies nicht der Fall, wird contentRect verwendet.

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      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`;
    }
  }
});

resizeObserver.observe(divElem);

Spezifikationen

Specification
Resize Observer # dom-resizeobserverentry-contentrect

Browser-Kompatibilität

BCD tables only load in the browser