Wie kann ich Dimensionsänderungen in DIV-Elementen effizient erkennen?

Erkennung von Dimensionsänderungen in DIV-Elementen

Das Erkennen der Dimensionsänderung eines DIV-Elements, insbesondere während der Fenstergrößenänderung, kann eine wertvolle Funktion sein in bestimmten Szenarien. In diesem Artikel wird erläutert, wie Sie dies mithilfe der Resize Observer-API erreichen.

Der jQuery-Resize-Ereignishandler, wie im bereitgestellten HTML-Code gezeigt, ist für diesen Zweck nicht geeignet. Die Resize Observer API bietet eine standardisierte und effizientere Möglichkeit, auf Dimensionsänderungen in DOM-Elementen zu warten.

Verwendung der Resize Observer API

Um Dimensionsänderungen in einem DIV zu erkennen Führen Sie mithilfe der Resize Observer-API die folgenden Schritte aus:

1. Erstellen Sie einen neuen ResizeObserver Beispiel:

const observer = new ResizeObserver(callback);

2. Übergeben Sie eine Rückruffunktion an den ResizeObserver-Konstruktor, die immer dann aufgerufen wird, wenn sich die Abmessungen des beobachteten Elements ändern:

function callback(entries) {
  // Check if the entry pertains to the target DIV
  const targetIndex = entries.findIndex((entry) => entry.target === targetDiv);
  if (targetIndex < 0) {
    return;
  }

  // Update the dimensions based on the entry's contentRect
  const { width, height } = entries[targetIndex].contentRect;
  targetDiv.style.width = `${width}px`;
  targetDiv.style.height = `${height}px`;
}

3. Beobachten Sie den Ziel-DIV mit dem ResizeObserver Beispiel:

observer.observe(targetDiv);

4. Stellen Sie sicher, dass Sie in Ihrem HTML-Code die Resize Observer-Polyfüllung für ältere Browser einschließen:

<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>

Beispiel Code

Der folgende Codeausschnitt bietet ein praktisches Beispiel für die Verwendung des Resize Observer API:

<div>

Durch die Nutzung der Resize Observer API können Sie Dimensionsänderungen in DIV-Elementen effektiv erkennen und so in Ihren Webanwendungen entsprechend reagieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Dimensionsänderungen in DIV-Elementen effizient erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!