Bagaimana untuk Mengesan Perubahan dalam Ketinggian DIV atau Atribut CSS dengan jQuery?

Menentukan Perubahan dalam Ketinggian DIV atau Atribut CSS

Apabila bekerja dengan halaman web, selalunya perlu untuk menjejaki perubahan ketinggian atau CSS lain sifat unsur. jQuery menyediakan pelbagai pilihan untuk menangani keperluan ini.

Penjejakan Peristiwa dengan 'change()':

Sementara acara 'change()' digunakan terutamanya untuk elemen input , ia boleh disesuaikan untuk mengesan perubahan CSS. Walau bagaimanapun, pendekatan ini melibatkan pemeriksaan secara berkala sifat CSS elemen dan mencetuskan peristiwa jika ia berbeza daripada nilai sebelumnya:

<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);
}</code>

Pengikatan Peristiwa Tersuai dengan 'bind()':

Penyelesaian yang lebih cekap melibatkan mencipta acara tersuai dan mengikatnya pada elemen yang diingini:

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


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

Dalam kes ini, kami mencetuskan acara 'Tukar ketinggian' apabila ketinggian div 'Kandungan utama' diubah.

Nota:

• Kekerapan semakan dalam fungsi 'checkForChanges()' boleh dilaraskan untuk memenuhi keperluan khusus.
• Kaedah 'bind()' dan 'trigger()' didokumentasikan dengan baik dalam dokumentasi jQuery untuk rujukan selanjutnya.

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