Bagaimana untuk Mengesan Perubahan dalam Ketinggian Div atau Atribut CSS dalam jQuery?

Mengesan Ketinggian Div atau Perubahan Atribut CSS dalam jQuery

Mencetuskan Peristiwa pada Perubahan CSS

jQuery secara asalnya tidak mempunyai acara tertentu pengendali untuk perubahan atribut CSS, termasuk pengubahsuaian ketinggian. Walau bagaimanapun, terdapat dua pendekatan untuk menangani masalah ini:

Pendekatan 1: Pemantauan Elemen DOM

Secara kerap memeriksa elemen DOM untuk perubahan CSS pada selang masa yang dipratentukan (mis., 500 milisaat).

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

Pendekatan 2: Pencetusan Peristiwa Tersuai

Ikat pengendali acara tersuai ('Tukar ketinggian' dalam contoh) pada elemen. Cetuskan acara apabila anda mengubah suai CSSnya.

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


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

Pendekatan kedua disyorkan jika anda mempunyai kawalan ke atas perubahan CSS, kerana ia lebih cekap dan elegan.

Dokumentasi:

• bind: Lampirkan pengendali acara pada elemen.
• cetus: Laksanakan semua pengendali acara untuk jenis acara tertentu.

Nota:

Terdapat peristiwa mutasi DOMAttrModified yang sudah lapuk yang membenarkan untuk menjejaki perubahan CSS, tetapi ia tidak lagi disyorkan.

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