Comment puis-je détecter les changements de dimension DIV en JavaScript ?

Détection des changements de dimension DIV avec JavaScript

Bien que les éléments d'un DIV puissent se repositionner lors du redimensionnement de la fenêtre, la dimension du DIV elle-même peut également changer. Pour surveiller ces changements de dimension, vous pouvez utiliser différentes méthodes.

1. Événement de redimensionnement jQuery (obsolète)

Auparavant, vous avez tenté d'utiliser l'événement de redimensionnement jQuery sur le DIV cible. Cependant, cette méthode est généralement inefficace pour les divs. Il est plus adapté aux changements de taille de Windows/document.

2. API Mutation Observer

Une approche plus récente est l'API Mutation Observer, qui vous permet d'observer les modifications apportées aux éléments DOM. Cela peut inclure des changements de dimensions. Voici un exemple :

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

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

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

3. API Resize Observer (préféré)

L'API Resize Observer cible spécifiquement la surveillance des changements de dimensions et est prise en charge par les navigateurs modernes. Voici comment l'utiliser :

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

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

observer.observe(element);

Lorsque les dimensions du DIV changent, l'observateur déclenchera la fonction de rappel spécifiée.

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!