Bagaimanakah Saya Boleh Mengesan Perubahan Dimensi Elemen DIV dengan Amanah?

Mengesan Perubahan Dimensi Elemen DIV

Anda menghadapi kesukaran untuk mengesan perubahan dimensi elemen DIV apabila tetingkap penyemak imbas diubah saiz. Soalan ini meneroka kemungkinan penyelesaian untuk masalah ini.

JQuery Resize Event Binding

Pendekatan awal anda untuk mengikat fungsi panggil balik kepada acara ubah saiz jQuery pada DIV adalah tidak betul. Peristiwa ubah saiz dicetuskan hanya apabila tetingkap diubah saiz, bukan apabila dimensi DIV berubah.

Penyelesaian: Resize Observer API

Penyelesaian yang lebih baharu ialah Resize Observer API, yang mempunyai sokongan pelayar yang baik. API ini membolehkan anda melihat perubahan dalam dimensi elemen:

const observer = new ResizeObserver((entries) => {
  // Code to handle dimension changes
});

observer.observe(targetElement);

Dalam sampel HTML yang disediakan, anda boleh menggunakan Ubah Saiz Observer API seperti berikut:

const textbox = document.getElementById('textbox');
const width = document.getElementById('width');
const height = document.getElementById('height');

const observer = new ResizeObserver(() => {
  width.value = textbox.offsetWidth;
  height.value = textbox.offsetHeight;
});

observer.observe(textbox);

Kod ini akan mengemas kini output lebar dan ketinggian apabila dimensi kotak teks berubah.

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