Maison >interface Web >tutoriel CSS >Comment détecter les modifications de la hauteur de division ou des attributs CSS dans jQuery ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-11-04 02:21:30830parcourir

How to Detect Changes in Div Height or CSS Attributes in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn