Comment puis-je détecter le débordement d'un élément HTML à l'aide de JavaScript ?

Examen de l'état de débordement d'un élément

Lorsque vous travaillez avec des éléments HTML, il est souvent essentiel de déterminer si leur contenu s'étend au-delà de leurs limites désignées. Cela permet aux développeurs d'implémenter des fonctionnalités telles que l'affichage d'indicateurs de débordement et d'ajuster la disposition en conséquence.

Une approche pour y parvenir consiste à utiliser la fonction isOverflyn(), qui évalue l'état de débordement d'un élément DOM. Il évalue les conditions de débordement vertical et horizontal, renvoyant une valeur booléenne :

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

Cette fonction peut être utilisée dans divers scénarios. Par exemple, dans le cas d'utilisation mentionné, vous pouvez l'utiliser pour déterminer si un élément avec une limite de hauteur de 300 px a un contenu qui dépasse cette hauteur. Si un débordement est détecté, vous pouvez alors afficher un bouton « plus » ; sinon, cachez-le.

Pour démontrer l'utilité de isOverflyn(), considérez l'extrait JavaScript suivant :

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 pour cette démonstration :

.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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!