Bagaimanakah Saya Boleh Mengesan Perubahan Dimensi dengan Cekap dalam Elemen DIV?

Pengesanan Perubahan Dimensi dalam Elemen DIV

Mengesan perubahan dalam dimensi elemen DIV, terutamanya semasa mengubah saiz tetingkap, boleh menjadi keupayaan yang berharga dalam senario tertentu. Artikel ini meneroka cara untuk mencapai ini menggunakan API Pemerhati Ubah Saiz.

Pengendali peristiwa ubah saiz jQuery, seperti yang ditunjukkan dalam kod HTML yang disediakan, tidak sesuai untuk tujuan ini. API Pemerhati Ubah Saiz menyediakan cara piawai dan lebih cekap untuk mendengar perubahan dimensi dalam elemen DOM.

Menggunakan API Pemerhati Ubah Saiz

Untuk mengesan perubahan dimensi dalam DIV menggunakan Resize Observer API, ikuti langkah berikut:

1. Buat ResizeObserver baharu instance:

const observer = new ResizeObserver(callback);

2. Lepaskan fungsi panggil balik kepada pembina ResizeObserver, yang akan digunakan apabila dimensi elemen yang diperhatikan berubah:

function callback(entries) {
  // Check if the entry pertains to the target DIV
  const targetIndex = entries.findIndex((entry) => entry.target === targetDiv);
  if (targetIndex < 0) {
    return;
  }

  // Update the dimensions based on the entry's contentRect
  const { width, height } = entries[targetIndex].contentRect;
  targetDiv.style.width = `${width}px`;
  targetDiv.style.height = `${height}px`;
}

3. Perhatikan DIV sasaran menggunakan ResizeObserver contoh:

observer.observe(targetDiv);

4. Dalam kod HTML anda, pastikan anda memasukkan poliisi Ubah Saiz Pemerhati untuk penyemak imbas lama:

<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>

Contoh Kod

Coretan kod berikut menyediakan contoh praktikal menggunakan Pemerhati Ubah Saiz API:

<div>

Dengan menggunakan Resize Observer API, anda boleh mengesan perubahan dimensi dalam elemen DIV dengan berkesan, membolehkan anda bertindak balas dengan sewajarnya dalam aplikasi web anda.

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