Wie kann ich Dimensionsänderungen von DIV-Elementen zuverlässig erkennen?

Erkennen von Dimensionsänderungen von DIV-Elementen

Sie sind auf Schwierigkeiten beim Erkennen von Dimensionsänderungen eines DIV-Elements gestoßen, wenn die Größe des Browserfensters geändert wird. In dieser Frage werden mögliche Lösungen für dieses Problem untersucht.

jQuery-Resize-Ereignisbindung

Ihr erster Ansatz, die Rückruffunktion an das jQuery-Resize-Ereignis auf dem DIV zu binden, ist falsch. Das Größenänderungsereignis wird nur ausgelöst, wenn die Größe des Fensters geändert wird, nicht wenn sich die Abmessungen des DIV ändern.

Lösung: Resize Observer API

Eine neuere Lösung ist die Größenänderung Observer-API, die eine gute Browserunterstützung bietet. Mit dieser API können Sie Änderungen in den Abmessungen eines Elements beobachten:

const observer = new ResizeObserver((entries) => {
  // Code to handle dimension changes
});

observer.observe(targetElement);

Im bereitgestellten HTML-Beispiel können Sie die Resize Observer API wie folgt verwenden:

const textbox = document.getElementById('textbox');
const width = document.getElementById('width');
const height = document.getElementById('height');

const observer = new ResizeObserver(() => {
  width.value = textbox.offsetWidth;
  height.value = textbox.offsetHeight;
});

observer.observe(textbox);

Dieser Code aktualisiert die Breiten- und Höhenausgaben, wenn sich die Abmessungen des Textfelds ändern.

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