ResizeObserverEntry: contentRect-Eigenschaft
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