Comment détecter les modifications de la hauteur DIV ou des attributs CSS avec jQuery ?

Détermination des modifications de la hauteur 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 :

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

    setTimeout(checkForChanges, 500);
}</code>

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é :

<code class="javascript">$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


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

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

Remarque :

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

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!