Comment détecter les modifications CSS, en particulier les modifications de hauteur, à l'aide de jQuery ?

Comment détecter les modifications CSS à l'aide de JQuery

JQuery n'a pas d'événement intégré pour détecter les modifications dans les attributs CSS. Cependant, vous pouvez créer le vôtre en utilisant les approches suivantes :

Surveillance continue du DOM (première méthode) :

Interrogez le DOM périodiquement (par exemple, toutes les 500 millisecondes) pour comparez la valeur actuelle de l'attribut CSS à la valeur précédente. S'ils diffèrent, déclenchez un événement.

Exemple :

<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);
}

checkForChanges();</code>

Déclenchement manuel d'un événement (deuxième voie) :

Liez un gestionnaire d'événements personnalisé à l'élément cible, puis déclenchez manuellement cet événement chaque fois que vous modifiez le CSS de l'élément.

Exemple :

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

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

Détermination spécifique des changements de hauteur (solution au problème initial) :

Dans le cas spécifique de la détection des changements de hauteur pour le div #mainContent, utilisez la deuxième approche avec le code suivant :

<code class="javascript">$('#mainContent').bind('heightChange', function () {
    $("#separator").css('height', $("#mainContent").height());
});</code>

N'oubliez pas de lier le gestionnaire d'événements avant d'apporter des modifications à la hauteur du div #mainContent.

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!