Rumah > hujung hadapan web > tutorial js > Bolehkah Anda Mengesan Perubahan Gaya dalam Elemen Menggunakan JavaScript?

Bolehkah Anda Mengesan Perubahan Gaya dalam Elemen Menggunakan JavaScript?

Mary-Kate Olsen
Lepaskan: 2024-11-11 03:46:02
asal
652 orang telah melayarinya

Can You Detect Style Changes in Elements Using 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'] });
Salin selepas log masuk

Contoh:

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

$('p').width(100);
$('p').css('color','red');
Salin selepas log masuk

Ini akan menghasilkan yang berikut:

width: 100px;
color: red;
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan