Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mengesan Perubahan Dimensi DIV dalam JavaScript?

Bagaimanakah Saya Boleh Mengesan Perubahan Dimensi DIV dalam JavaScript?

Barbara Streisand
Lepaskan: 2024-11-28 22:24:11
asal
570 orang telah melayarinya

How Can I Detect DIV Dimension Changes in 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'] });
Salin selepas log masuk

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);
Salin selepas log masuk

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!

Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan