Comment JavaScript peut-il détecter le contenu débordé dans les éléments HTML, même sans barres de défilement visibles ?

Détection du contenu débordé dans les éléments HTML à l'aide de JavaScript

Dans le développement Web, il est crucial de s'assurer que le contenu des éléments ne déborde pas au-delà de leur limites, même si les barres de défilement ne sont pas visibles. Ce problème peut survenir, par exemple, dans les éléments de taille fixe et dont la propriété "overflow" est définie sur "visible".

Pour déterminer si un élément a dépassé son contenu, vous pouvez exploiter JavaScript. L'approche standard consiste à comparer le client[Hauteur|Largeur] de l'élément avec son défilement[Hauteur|Largeur]. Cependant, lorsque la propriété overflow est définie sur « visible », ces valeurs seront identiques.

Pour résoudre ce problème, une routine de détection plus élaborée est nécessaire, comme en témoigne la fonction JavaScript suivante :

function checkOverflow(el) {
   var curOverflow = el.style.overflow;

   if (!curOverflow || curOverflow === "visible")
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

Cette fonction définit temporairement le style "débordement" de l'élément sur "caché" pour calculer correctement les valeurs scrollHeight et scrollWidth. Après le calcul, il restaure le style de débordement d'origine. En comparant ces valeurs avec clientHeight et clientWidth de l'élément, il peut déterminer si un élément déborde verticalement ou horizontalement.

Cette approche a été testée dans divers navigateurs, notamment Firefox 3, Firefox 40.0.2, Internet Explorer. 6 et Chrome 0.2.149.30.

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!