Comment détecter les modifications dans les propriétés CSS avec jQuery ?

Détection d'événements de mutation pour les modifications de propriétés CSS avec jQuery

Le besoin de détecter les modifications dans les propriétés CSS se pose souvent dans le développement Web. Par exemple, vous souhaiterez peut-être exécuter une action spécifique lorsque la propriété d'affichage d'un élément est modifiée. Cependant, déterminer si la propriété display ou toute autre propriété CSS a changé de manière native dans jQuery peut être un défi.

Vérification des modifications de propriété CSS avec DOMAttrModified

Heureusement, le Le module Événements DOM niveau 2 répond à ce besoin avec des événements de mutation. L'un de ces événements, DOMAttrModified, offre la possibilité de surveiller les modifications d'attributs, y compris les changements de style.

Pour utiliser DOMAttrModified, vous pouvez implémenter le code suivant :

<code class="js">document.documentElement.addEventListener('DOMAttrModified', function(e) {
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';</code>

Ce code attache un écouteur à l'élément racine (document.documentElement) de l'événement DOMAttrModified. Lorsque l'attribut de style change, l'écouteur capture les valeurs précédentes et nouvelles.

Alternative pour Internet Explorer : propertychange

Si vous devez prendre en charge les navigateurs Internet Explorer, vous pouvez utilisez l'événement "propertychange" comme solution de secours vers DOMAttrModified. Il permet une détection fiable des changements de style dans IE.

Remarque :

Il est important de noter que les événements de mutation sont obsolètes et peuvent ne pas être pris en charge par tous les navigateurs. Pour une solution plus compatible avec tous les navigateurs, envisagez plutôt d'utiliser un observateur de mutation.

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!