Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengesan Perubahan dalam Ketinggian DIV atau Atribut CSS dengan jQuery?

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

Barbara Streisand
Barbara Streisandasal
2024-11-04 00:25:03274semak imbas

How to Detect Changes in DIV Height or CSS Attributes with 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!

Kenyataan:
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