Bagaimanakah Saya Boleh Menjejaki Perubahan Dimensi DIV dengan Amanah dalam JavaScript?

Penjejakan Peristiwa untuk Perubahan Dimensi DIV

Untuk memantau saiz semula dinamik elemen DIV sebagai tindak balas kepada pelarasan saiz tetingkap, adalah penting untuk memahami batasan pengendali acara sedia ada. Walaupun acara ubah saiz jQuery berfungsi dengan berkesan untuk elemen boleh ubah saiz tradisional seperti imej, ia mungkin tidak mencetuskan DIV kerana sifat bendalirnya.

Untuk penjejakan acara yang konsisten, kami mengesyorkan agar memanfaatkan API Pemerhati Ubah Saiz, yang menyediakan teguh dan silang -penyelesaian penyemak imbas untuk memantau perubahan dimensi DIV. API menggunakan sintaks mudah dan menyediakan kemas kini dimensi yang tepat.

Untuk melaksanakan Resize Observer API untuk DIV dengan dimensi berubah:

const div = document.getElementById("test_div");

const resizeObserver = new ResizeObserver((entries) => {
  console.log('DIV dimension changed: ', entries[0].borderBoxSize);
});

resizeObserver.observe(div);

Kod ini memulakan pemerhati ubah saiz untuk DIV sasaran (" test_div") dan log dimensi yang dikemas kini apabila saiz semula berlaku. Sifat entri[0].borderBoxSize menyediakan lebar dan ketinggian tepat DIV, termasuk sempadannya.

Dengan menggunakan API Pemerhati Saiz Ubah Saiz, anda boleh menyambung dengan berkesan peristiwa perubahan dimensi DIV, membolehkan aplikasi anda secara dinamik bertindak balas untuk mengubah saiz dan mengekalkan pengalaman pengguna yang konsisten.

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