Comment JavaScript peut-il détecter le débordement de contenu d'un élément HTML, même avec « overflow : visible » ?

Vérification du débordement de contenu dans les éléments HTML à l'aide de JavaScript

Lorsque le contenu d'un élément HTML dépasse ses dimensions définies, cela peut entraîner un débordement. Bien que le débordement visible puisse être vérifié à l'aide de vérifications standard, la vérification du débordement avec la propriété "overflow: visible" peut poser un défi.

Solution JavaScript

Pour en tenir compte , une fonction JavaScript peut être employé :

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

   // If overflow is 'visible' or not set
   if (!curOverflow || curOverflow === "visible") {
      // Temporarily set overflow to 'hidden'
      el.style.overflow = "hidden";
   }

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

   // Restore original overflow style
   el.style.overflow = curOverflow;

   return isOverflowing;
}

Utilisation :

Passez l'élément HTML en question en paramètre à la fonction checkOverflow pour déterminer si son contenu déborde. La fonction retournera vrai s'il y a débordement, sinon elle retournera faux.

Compatibilité :

Cette solution a été testée dans Firefox 3 et 40, 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!