ResizeObserverEntry: contentRect-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

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.

In diesem Artikel

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.

js
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

Spezifikation

Resize Observer
# dom-resizeobserverentry-contentrect

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Resize Observer API
ResizeObserverEntry
Instanzeigenschaften
Verwandte Seiten für Resize Observer API
1. ResizeObserver