Pouvez-vous suivre les modifications des attributs de style en JavaScript ?

Est-il possible de surveiller les changements d'attributs de style ?

Le framework jQuery ne dispose pas d'un écouteur d'événements spécifique pour les changements de style. Cependant, l'utilisation de MutationObserver peut suivre efficacement les modifications de l'attribut « style ».

Utilisation de MutationObserver

const target = document.getElementById('myId');
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutationRecord) => {
    console.log('Style changed!');
  });
});

observer.observe(target, { attributes: true, attributeFilter: ['style'] });

Dans la fonction de rappel, l'objet mutationRecord donne accès aux anciennes et aux nouvelles valeurs de style.

Solution temporaire utilisant le remplacement de jQuery

Auparavant, une solution de contournement basée sur jQuery impliquait de remplacer temporairement la méthode prototype.css :

(function() {
  var ev = new $.Event('style');
  var orig = $.fn.css;
  $.fn.css = function() {
    $(this).trigger(ev);
    return orig.apply(this, arguments);
  }
})();

Bien que cette approche ne soit plus nécessaire avec MutationObserver support, il montre comment intercepter les changements de style.

Considérations supplémentaires

MutationObserver est bien pris en charge dans les navigateurs modernes, y compris IE 11, ce qui en fait une solution viable pour détecter les modifications d'attributs de style.

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!