Können Sie Stilattributänderungen in JavaScript verfolgen?

Ist es möglich, Stilattributänderungen zu überwachen?

Dem jQuery-Framework fehlt ein spezifischer Ereignis-Listener für Stiländerungen. Durch die Nutzung von MutationObserver können Änderungen des „Stil“-Attributs jedoch effektiv verfolgt werden.

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

In der Callback-Funktion bietet das mutationRecord-Objekt Zugriff auf die alten und neuen Stilwerte.

Vorübergehende Lösung mit jQuery Override

Zuvor eine jQuery-basierte Die Problemumgehung bestand darin, die Methode „prototyp.css“ vorübergehend zu überschreiben:

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

Während dieser Ansatz mit MutationObserver-Unterstützung nicht mehr notwendig ist, zeigt er, wie Stiländerungen abgefangen werden können.

Zusätzliche Überlegungen

MutationObserver wird in modernen Browsern, einschließlich IE 11, gut unterstützt, was es zu einer praktikablen Lösung zur Stilerkennung macht Attributänderungen.

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