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

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

ResizeObserver: ResizeObserver() Konstruktor - Web-APIs

Baseline Widely available

Der ResizeObserver-Konstruktor erstellt ein neues ResizeObserver-Objekt, das verwendet werden kann, um Änderungen am Inhalts- oder Rahmenbereich eines Element oder dem Begrenzungsrahmen eines SVGElement zu melden.

new ResizeObserver(callback)

callback

Die Funktion, die jedes Mal aufgerufen wird, wenn eine beobachtete Größenänderung auftritt. Die Funktion wird mit zwei Parametern aufgerufen:

entries

Ein Array von ResizeObserverEntry-Objekten, das verwendet werden kann, um auf die neuen Abmessungen des Elements nach jeder Änderung zuzugreifen.

observer

Eine Referenz auf den ResizeObserver selbst, sodass er definitiv von innerhalb des Callbacks zugänglich ist, falls Sie ihn benötigen. Dies könnte beispielsweise verwendet werden, um den Observer automatisch nicht mehr zu beobachten, wenn eine bestimmte Bedingung erreicht wird. Sie können ihn jedoch weglassen, wenn Sie ihn nicht benötigen.

Der Callback folgt im Allgemeinen einem Muster in der Art von:

function callback(entries, observer) {
  for (const entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

Das folgende Snippet stammt aus dem resize-observer-text.html (Quelle ansehen) Beispiel:

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      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 {
        // legacy path
        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