Bolehkah Anda Menjejaki Perubahan Atribut Gaya dalam JavaScript?

Adakah Kemungkinan untuk Memantau Perubahan Atribut Gaya?

Rangka kerja jQuery tidak mempunyai pendengar acara khusus untuk perubahan gaya. Walau bagaimanapun, memanfaatkan MutationObserver boleh menjejaki pengubahsuaian atribut 'style' dengan berkesan.

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

Dalam fungsi panggil balik, objek mutationRecord menyediakan akses kepada nilai gaya lama dan baharu.

Penyelesaian Sementara Menggunakan jQuery Override

Sebelum ini, penyelesaian berasaskan jQuery melibatkan mengatasi sementara kaedah prototype.css:

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

Walaupun pendekatan ini tidak lagi diperlukan dengan MutationObserver sokongan, ia menunjukkan cara memintas perubahan gaya.

Pertimbangan Tambahan

MutationObserver disokong dengan baik dalam penyemak imbas moden, termasuk IE 11 , menjadikannya penyelesaian yang berdaya maju untuk mengesan pengubahsuaian atribut gaya.

Atas ialah kandungan terperinci Bolehkah Anda Menjejaki Perubahan Atribut Gaya dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!