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

Mengesan Perubahan Dimensi DIV

Masalah:

Menentukan dimensi DIV selalunya perlu, terutamanya apabila elemen di dalamnya diubah kedudukan semasa mengubah saiz tetingkap. Walau bagaimanapun, acara ubah saiz jQuery tradisional untuk DIV tidak mengesan perubahan dimensi.

Penyelesaian: Ubah Saiz Observer API

Penyelesaian yang lebih baharu ialah Resize Observer API, yang menyediakan cara yang lebih baik untuk memantau perubahan pada DIV dimensi.

Pelaksanaan:

Untuk menggunakan Resize Observer API:

1. Sertakan skrip dalam HTML anda:

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

   Salin selepas log masuk

2. Buat Ubah Saiz baharu Pemerhati:

   const resizeObserver = new ResizeObserver(function(entries) {
     ...
   });

   Salin selepas log masuk

3. Perhatikan sasaran DIV:

   resizeObserver.observe(targetDiv);

   Salin selepas log masuk

4. Tentukan fungsi panggil balik untuk mengendalikan perubahan dimensi:

   function callback(entries) {
     const entry = entries[0];
     const width = entry.contentRect.width;
     const height = entry.contentRect.height;
   
     // Do something with the new dimensions
   }

   Salin selepas log masuk

5. Tambahkan fungsi panggil balik pada pemerhati:

   resizeObserver.addCallback(callback);

   Salin selepas log masuk

   Dengan menggunakan Ubah Saiz Observer API, anda kini boleh mengesan dan bertindak balas terhadap perubahan dalam dimensi DIV, walaupun jika elemen dalam diletakkan semula.

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