Comment JavaScript peut-il détecter le débordement d'un élément ?

Détection du débordement d'éléments avec JavaScript

Pour déterminer si le contenu d'un élément dépasse l'espace désigné, JavaScript propose une approche pratique. La fonction isOverflyn() est conçue pour vérifier si un élément présente un débordement vertical, horizontal ou les deux.

Pour utiliser cette fonction, transmettez simplement l'élément qui vous intéresse comme argument, et il renverra une valeur booléenne. indiquant s'il a débordé.

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

Voici comment appliquer cette fonction :

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

Dans ce Par exemple, nous parcourons tous les éléments avec la classe 'demos', vérifions si chaque élément a débordé, puis affichons le message correspondant avec une bordure rouge ou verte selon l'état de débordement.

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!