Pouvez-vous détecter les changements de style dans les éléments à l’aide de JavaScript ?

Écouter les changements de style avec MutationObserver

Question :
Est-il possible de surveiller les changements de style dans un élément utilisant un écouteur d'événement en JavaScript ? Par exemple, pourriez-vous détecter quand les dimensions d'un élément changent à l'aide de jQuery ?

Réponse :

Oui, MutationObserver est une API de navigateur moderne qui vous permet d'observer les changements dans un les attributs de l'élément, y compris son style.

Implémentation :

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'] });

Exemple :

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

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

Cela affichera ce qui suit :

width: 100px;
color: red;

Support :

MutationObserver est largement pris en charge dans les navigateurs modernes, y compris IE 11.

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!