Comment puis-je détecter efficacement les changements de dimension dans les éléments DIV ?

Détection de changement de dimension dans les éléments DIV

Détection du changement de dimensions d'un élément DIV, en particulier lors du redimensionnement de la fenêtre, peut être une fonctionnalité précieuse dans certains scénarios. Cet article explique comment y parvenir à l'aide de l'API Resize Observer.

Le gestionnaire d'événements de redimensionnement jQuery, comme démontré dans le code HTML fourni, n'est pas adapté à cet effet. L'API Resize Observer fournit un moyen standardisé et plus efficace d'écouter les changements de dimension dans les éléments DOM.

Utilisation de l'API Resize Observer

Pour détecter les changements de dimension dans un DIV à l'aide de l'API Resize Observer, suivez ces étapes :

1. Créez un nouveau ResizeObserver instance :

const observer = new ResizeObserver(callback);

2. Passez une fonction de rappel au constructeur ResizeObserver, qui sera invoquée chaque fois que les dimensions de l'élément observé changent :

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. Observez le DIV cible à l'aide du ResizeObserver exemple :

observer.observe(targetDiv);

4. Dans votre code HTML, assurez-vous d'inclure le polyfill Resize Observer pour les anciens navigateurs :

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

Exemple Code

L'extrait de code suivant fournit un exemple pratique utilisant Resize Observer API :

<div>

En utilisant l'API Resize Observer, vous pouvez détecter efficacement les changements de dimension dans les éléments DIV, vous permettant de répondre en conséquence dans vos applications Web.

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!