Wie kann ich DIV-Dimensionsänderungen in JavaScript erkennen?

Erkennen von DIV-Dimensionsänderungen mit JavaScript

Während Elemente innerhalb eines DIV während der Fenstergrößenänderung möglicherweise neu positioniert werden, kann sich auch die Dimension des DIV selbst ändern. Um diese Dimensionsänderungen zu überwachen, können Sie verschiedene Methoden nutzen.

1. jQuery-Größenänderungsereignis (veraltet)

Zuvor haben Sie versucht, das jQuery-Größenänderungsereignis für das Ziel-DIV zu verwenden. Diese Methode ist jedoch für Divs im Allgemeinen unwirksam. Es eignet sich besser für Änderungen der Fenster-/Dokumentgröße.

2. Mutation Observer API

Ein neuerer Ansatz ist die Mutation Observer API, mit der Sie Änderungen an DOM-Elementen beobachten können. Dazu können Maßänderungen gehören. Hier ein Beispiel:

const element = document.getElementById('test_div');

const observer = new MutationObserver(() => {
  console.log('DIV dimensions have changed');
});

observer.observe(element, { attributes: true, attributeFilter: ['style'] });

3. Resize Observer API (bevorzugt)

Die Resize Observer API zielt speziell auf die Überwachung von Dimensionsänderungen ab und wird von modernen Browsern unterstützt. So verwenden Sie es:

const element = document.getElementById('test_div');

const observer = new ResizeObserver(() => {
  console.log('DIV dimensions have changed');
});

observer.observe(element);

Wenn sich die Dimensionen des DIV ändern, löst der Beobachter die angegebene Rückruffunktion aus.

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