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

Erkennen von DIV-Dimensionsänderungen

Problem:

Das Bestimmen der Dimensionen eines DIV ist häufig Dies ist insbesondere dann erforderlich, wenn darin enthaltene Elemente während der Größenänderung des Fensters neu positioniert werden. Das herkömmliche jQuery-Größenänderungsereignis für DIVs erkennt jedoch keine Dimensionsänderungen.

Lösung: Resize Observer API

Eine neuere Lösung ist die Resize Observer API, die eine bereitstellt bessere Möglichkeit, Änderungen an DIVs zu überwachen Abmessungen.

Implementierung:

So verwenden Sie die Resize Observer API:

1. Fügen Sie das Skript in Ihren HTML-Code ein:

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

   Nach dem Login kopieren

2. Erstellen Sie eine neue Größenänderung Beobachter:

   const resizeObserver = new ResizeObserver(function(entries) {
     ...
   });

   Nach dem Login kopieren

3. Beobachten Sie den Ziel-DIV:

   resizeObserver.observe(targetDiv);

   Nach dem Login kopieren

4. Definieren Sie eine Rückruffunktion, um Dimensionsänderungen zu verarbeiten:

   function callback(entries) {
     const entry = entries[0];
     const width = entry.contentRect.width;
     const height = entry.contentRect.height;
   
     // Do something with the new dimensions
   }

   Nach dem Login kopieren

5. Fügen Sie die Rückruffunktion zum hinzu Beobachter:

   resizeObserver.addCallback(callback);

   Nach dem Login kopieren

   Durch die Verwendung der Resize Observer API können Sie jetzt Änderungen in den Abmessungen eines DIV erkennen und darauf reagieren, selbst wenn die inneren Elemente neu positioniert werden.

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