Pouvez-vous surveiller les changements de style en JavaScript ?

Pouvez-vous surveiller les changements de style avec un écouteur d'événement ?

Dans le domaine du développement front-end, être capable de répondre aux changements de style dynamiquement peut être inestimable. Dans le passé, on souhaitait créer un écouteur d'événements jQuery qui suivrait tout changement de style. Cependant, cette fonctionnalité n'est pas disponible nativement.

Au lieu de cela, une solution de contournement a été développée. En remplaçant la méthode CSS interne de jQuery, un déclencheur pourrait être ajouté à la fin de la méthode pour déclencher un événement chaque fois qu'un changement de style se produisait :

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

Cette solution fournissait un moyen de lier les écouteurs d'événements aux changements de style :

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

Techniques modernes avec MutationObservers

Depuis lors, la technologie a progressé et MutationObservers offre une approche plus moderne et conforme aux normes pour détecter les changements dans le style ' attribut. Aucun jQuery n'est requis désormais :

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

Cette approche est prise en charge dans la plupart des navigateurs modernes, y compris Internet Explorer 11 . En utilisant un MutationObserver, vous pouvez surveiller efficacement les changements de style et réagir de manière appropriée dans vos applications.

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!