Comment puis-je détecter de manière fiable les changements de dimension DIV en JavaScript ?

Détection des changements de dimension DIV

Problème :

Déterminer les dimensions d'un DIV est souvent nécessaire, en particulier lorsque les éléments qu'il contient sont repositionnés lors du redimensionnement de la fenêtre. Cependant, l'événement de redimensionnement jQuery traditionnel pour les DIV ne détecte pas les changements de dimension.

Solution : API Resize Observer

Une solution plus récente est l'API Resize Observer, qui fournit un meilleure façon de surveiller les modifications apportées à un DIV dimensions.

Mise en œuvre :

Pour utiliser l'API Resize Observer :

1. Incluez le script dans votre HTML :

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

2. Créer un nouveau redimensionnement Observateur :

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

3. Observez le DIV cible :

   resizeObserver.observe(targetDiv);

4. Définissez une fonction de rappel pour gérer les changements de dimension :

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

5. Ajouter la fonction de rappel au observer :

   resizeObserver.addCallback(callback);

   En utilisant l'API Resize Observer, vous pouvez désormais détecter et répondre aux changements dans les dimensions d'un DIV, même si les éléments internes sont repositionnés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!