Bolehkah Anda Memantau Perubahan Gaya dalam JavaScript?

Bolehkah Anda Memantau Perubahan Gaya dengan Pendengar Acara?

Dalam bidang pembangunan bahagian hadapan, dapat bertindak balas terhadap perubahan gaya secara dinamik boleh menjadi tidak ternilai. Pada masa lalu, terdapat keinginan untuk mencipta pendengar acara jQuery yang menjejaki sebarang perubahan gaya. Walau bagaimanapun, ciri ini belum tersedia secara asli.

Sebaliknya, penyelesaian telah dibangunkan. Dengan mengatasi kaedah CSS dalaman jQuery, pencetus boleh ditambah pada penghujung kaedah untuk melancarkan acara apabila perubahan gaya berlaku:

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

Penyelesaian ini menyediakan cara untuk mengikat pendengar acara kepada perubahan gaya:

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

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

Teknik Moden dengan MutationObservers

Sejak itu, teknologi telah berkembang maju, dan MutationObservers menyediakan pendekatan yang lebih moden dan mematuhi standard untuk mengesan perubahan dalam atribut 'gaya'. Tiada jQuery diperlukan sekarang:

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

Pendekatan ini disokong dalam kebanyakan penyemak imbas moden, termasuk Internet Explorer 11 . Dengan menggunakan MutationObserver, anda boleh memantau perubahan gaya dengan berkesan dan bertindak balas dengan sewajarnya dalam aplikasi anda.

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