Détermination des modifications de la hauteur du DIV ou des attributs CSS

Lorsque vous travaillez avec des pages Web, il est souvent nécessaire de suivre les modifications de la hauteur ou d'autres CSS attributs des éléments. jQuery propose diverses options pour répondre à ce besoin.

Suivi des événements avec 'change()' :

Alors que l'événement 'change()' est principalement utilisé pour les éléments d'entrée , il peut être personnalisé pour détecter les modifications CSS. Cependant, cette approche implique de vérifier périodiquement les propriétés CSS de l'élément et de déclencher un événement si elles diffèrent des valeurs précédentes :

var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
    if ($element.css('height') != lastHeight)
    {
        alert('xxx');
        lastHeight = $element.css('height'); 
    }

    setTimeout(checkForChanges, 500);
}

Liaison d'événement personnalisée avec 'bind()' :

Une solution plus efficace consiste à créer un événement personnalisé et à le lier à l'élément souhaité :

$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


$("#btnSample1").click(function() {
    $("#mainContent").css('height', '400px');
    $("#mainContent").trigger('heightChange'); //<====
    ...
});    

Dans ce cas, nous déclenchons l'événement 'heightChange' chaque fois que la hauteur du div 'mainContent' est modifiée.

Remarque :

• La fréquence des vérifications dans la fonction 'checkForChanges()' peut être ajustée pour répondre à des besoins spécifiques.
• Les 'bind()' et Les méthodes 'trigger()' sont bien documentées dans la documentation jQuery pour référence ultérieure.