Bagaimana untuk Mengesan Perubahan CSS, Terutamanya Perubahan Ketinggian, Menggunakan jQuery?

Cara Mengesan Perubahan CSS menggunakan JQuery

JQuery tidak mempunyai acara terbina dalam untuk mengesan perubahan dalam atribut CSS. Walau bagaimanapun, anda boleh mencipta sendiri menggunakan pendekatan berikut:

Pemantauan DOM Berterusan (Cara Pertama):

Tinjau DOM secara berkala (mis., setiap 500 milisaat) ke bandingkan nilai atribut CSS semasa dengan nilai sebelumnya. Jika mereka berbeza, cetuskan acara.

Contoh:

<code class="javascript">var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');

function checkForChanges() {
    if ($element.css('height') != lastHeight) {
        alert('xxx');
        lastHeight = $element.css('height');
    }
    setTimeout(checkForChanges, 500);
}

checkForChanges();</code>

Pencetusan Peristiwa Manual (Cara Kedua):

Ikat pengendali acara tersuai pada elemen sasaran, kemudian cetuskan acara ini secara manual apabila anda menukar CSS elemen.

Contoh:

<code class="javascript">$('#mainContent').bind('heightChange', function(){
    alert('xxx');
});

$("#btnSample1").click(function() {
    $("#mainContent").css('height', '400px');
    $("#mainContent").trigger('heightChange');
});</code>

Menentukan Perubahan Ketinggian Secara Khusus (Penyelesaian untuk Masalah Awal):

Dalam kes khusus mengesan perubahan ketinggian untuk div #mainContent, gunakan pendekatan kedua dengan kod berikut:

<code class="javascript">$('#mainContent').bind('heightChange', function () {
    $("#separator").css('height', $("#mainContent").height());
});</code>

Ingat untuk mengikat pengendali acara sebelum membuat sebarang perubahan ketinggian pada div #mainContent.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Perubahan CSS, Terutamanya Perubahan Ketinggian, Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!