Können Sie Stiländerungen in JavaScript überwachen?

Können Sie Stiländerungen mit einem Event-Listener überwachen?

Im Bereich der Front-End-Entwicklung können Sie auf Stiländerungen reagieren dynamisch kann von unschätzbarem Wert sein. In der Vergangenheit gab es den Wunsch, einen jQuery-Ereignis-Listener zu erstellen, der alle Stiländerungen verfolgt. Diese Funktion war jedoch nicht nativ verfügbar.

Stattdessen wurde eine Problemumgehung entwickelt. Durch Überschreiben der internen CSS-Methode von jQuery könnte am Ende der Methode ein Trigger hinzugefügt werden, um ein Ereignis auszulösen, wenn eine Stiländerung auftritt:

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

Diese Lösung bot eine Möglichkeit, Ereignis-Listener an Stiländerungen zu binden:

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

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

Moderne Techniken mit MutationObservers

Seitdem hat die Technologie Fortschritte gemacht, und MutationObservers bieten einen moderneren und standardkonformen Ansatz zur Erkennung von Änderungen im Attribut „Stil“. Jetzt ist kein jQuery erforderlich:

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

Dieser Ansatz wird in den meisten modernen Browsern unterstützt, einschließlich Internet Explorer 11. Durch den Einsatz eines MutationObservers können Sie Stiländerungen effektiv überwachen und in Ihren Anwendungen entsprechend reagieren.

Das obige ist der detaillierte Inhalt vonKönnen Sie Stiländerungen in JavaScript überwachen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!