Comment puis-je suivre de manière fiable les modifications des dimensions DIV en JavaScript ?

Suivi des événements pour les changements de dimension DIV

Pour surveiller le redimensionnement dynamique d'un élément DIV en réponse aux ajustements de la taille de la fenêtre, il est essentiel de comprendre les limites des gestionnaires d'événements existants. Bien que l'événement de redimensionnement de jQuery fonctionne efficacement pour les éléments redimensionnables traditionnels tels que les images, il peut ne pas se déclencher pour les DIV en raison de leur nature fluide.

Pour un suivi cohérent des événements, nous vous recommandons d'exploiter l'API Resize Observer, qui fournit une approche robuste et croisée. -solution de navigateur pour surveiller les changements de dimension DIV. L'API utilise une syntaxe simple et fournit des mises à jour de dimensions précises.

Pour implémenter l'API Resize Observer pour les DIV à dimensions variables :

const div = document.getElementById("test_div");

const resizeObserver = new ResizeObserver((entries) => {
  console.log('DIV dimension changed: ', entries[0].borderBoxSize);
});

resizeObserver.observe(div);

Ce code initialise un observateur de redimensionnement pour le DIV cible (" test_div") et enregistre les dimensions mises à jour chaque fois qu'un redimensionnement se produit. La propriété inputs[0].borderBoxSize fournit la largeur et la hauteur exactes du DIV, y compris ses bordures.

En utilisant l'API Resize Observer, vous pouvez vous connecter efficacement aux événements de changement de dimension DIV, permettant ainsi à votre application de réagir dynamiquement. répondre aux redimensionnements et maintenir une expérience utilisateur cohérente.

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!