Bagaimanakah Saya Boleh Mengesan Perubahan Dimensi DIV dalam JavaScript?

Mengesan Perubahan Dimensi DIV dengan JavaScript

Walaupun elemen dalam DIV boleh meletakkan semula semasa saiz semula tetingkap, dimensi DIV itu sendiri juga mungkin berubah. Untuk memantau perubahan dimensi ini, anda boleh menggunakan pelbagai kaedah.

1. Acara ubah saiz jQuery (Usang)

Sebelum ini, anda cuba menggunakan acara ubah saiz jQuery pada DIV sasaran. Walau bagaimanapun, kaedah ini secara amnya tidak berkesan untuk div. Ia lebih sesuai untuk perubahan saiz tingkap/dokumen.

2. API Pemerhati Mutasi

Pendekatan yang lebih baharu ialah API Pemerhati Mutasi, yang membolehkan anda melihat perubahan pada elemen DOM. Ini boleh termasuk perubahan dalam dimensi. Berikut ialah contoh:

const element = document.getElementById('test_div');

const observer = new MutationObserver(() => {
  console.log('DIV dimensions have changed');
});

observer.observe(element, { attributes: true, attributeFilter: ['style'] });

3. Resize Observer API (Diutamakan)

Resize Observer API secara khusus menyasarkan pemantauan perubahan dalam dimensi dan disokong oleh penyemak imbas moden. Begini cara untuk menggunakannya:

const element = document.getElementById('test_div');

const observer = new ResizeObserver(() => {
  console.log('DIV dimensions have changed');
});

observer.observe(element);

Apabila dimensi DIV berubah, pemerhati akan mencetuskan fungsi panggil balik yang ditentukan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Perubahan Dimensi DIV dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!