Bagaimanakah Saya Boleh Mengesan Limpahan Elemen HTML Menggunakan JavaScript?

Memeriksa Status Limpahan Elemen

Apabila bekerja dengan elemen HTML, menentukan sama ada kandungannya melangkaui sempadan yang ditetapkan selalunya penting. Ini membolehkan pembangun melaksanakan fungsi seperti memaparkan penunjuk limpahan dan melaraskan reka letak dengan sewajarnya.

Satu pendekatan untuk mencapai ini ialah dengan menggunakan fungsi isOverflown(), yang menilai status limpahan elemen DOM. Ia menilai kedua-dua keadaan limpahan menegak dan mendatar, mengembalikan nilai boolean:

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

Fungsi ini boleh digunakan dalam pelbagai senario. Sebagai contoh, dalam kes penggunaan yang dinyatakan, anda boleh menggunakannya untuk membezakan sama ada elemen dengan had ketinggian 300px mempunyai kandungan yang melebihi ketinggian tersebut. Jika limpahan dikesan, anda kemudian boleh memaparkan butang "lebih"; jika tidak, sembunyikannya.

Untuk menunjukkan utiliti isOverflown(), pertimbangkan coretan JavaScript berikut:

var elements = document.getElementsByClassName('demos');
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  element.style.borderColor = (isOverflown(element) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(element) ? '' : 'not ') + "overflown.");
}

CSS untuk demonstrasi ini:

.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}

HTML :

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Limpahan Elemen HTML Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!