Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/de/docs/Web/API/ResizeObserverEntry below:

ResizeObserverEntry - Web-APIs | MDN

Baseline Widely available *

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.

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.

Hinweis: Die Inhaltsbox ist die Box, in der Inhalte platziert werden können, das bedeutet die Rahmenbox minus der Polsterung und der Rahmenbreite. Die Rahmenbox umfasst den Inhalt, die Polsterung und den Rahmen. Siehe Das Box-Modell für weitere Erklärungen.

Keine.

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);

Diese Seite wurde automatisch aus dem Englischen übersetzt.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4