Bolehkah Anda Mengesan Perubahan Gaya dalam Elemen Menggunakan JavaScript?

Mendengar Perubahan Gaya dengan MutationObserver

Soalan:
Adakah mungkin untuk memantau perubahan gaya dalam elemen menggunakan pendengar acara dalam JavaScript? Sebagai contoh, bolehkah anda mengesan apabila dimensi elemen berubah menggunakan jQuery?

Jawapan:

Ya, MutationObserver ialah API pelayar moden yang membolehkan anda melihat perubahan dalam atribut elemen, termasuk gayanya.

Pelaksanaan:

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

Contoh:

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

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

Ini akan menghasilkan yang berikut:

width: 100px;
color: red;

Sokongan:

MutationObserver disokong secara meluas dalam pelayar moden, termasuk IE 11 .

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