Comment détecter les modifications de la hauteur de division ou des attributs CSS dans jQuery ?

Détection des modifications de la hauteur de division ou des attributs CSS dans jQuery

Déclenchement d'événements sur les modifications CSS

jQuery ne dispose nativement pas d'un événement spécifique gestionnaire pour les modifications d'attributs CSS, y compris les modifications de hauteur. Cependant, il existe deux approches pour résoudre ce problème :

Approche 1 : surveillance des éléments DOM

Inspectez régulièrement l'élément DOM pour détecter les modifications CSS à un intervalle prédéfini (par exemple, 500 millisecondes).

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

Approche 2 : Déclenchement d'événements personnalisés

Liez un gestionnaire d'événements personnalisé (« hauteur » dans l'exemple) à l'élément. Déclenchez l'événement chaque fois que vous modifiez son CSS.

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


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

La deuxième approche est recommandée si vous contrôlez les modifications CSS, car elle est plus efficace et élégante.

Documentation :

• bind : attachez un gestionnaire d'événements à un élément.
• trigger : exécutez tous les gestionnaires d'événements pour un type d'événement spécifié.

Remarque :

Il y avait un événement de mutation DOMAttrModified obsolète qui permettait de suivre les modifications CSS, mais ce n'est plus recommandé.

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!