Déterminez si le contenu d'un élément HTML déborde.

Question

Puis-je utiliser JavaScript pour vérifier (sans tenir compte des barres de défilement) si un élément HTML a débordé de son contenu ? Par exemple, un long div avec une petite taille fixe, la propriété overflow définie sur visible, et aucune barre de défilement sur l'élément.

Answer 1

Il s'agit d'une solution javascript (avec Mootools) qui réduira la taille de la police pour l'adapter aux limites de elHeader.

while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
  var f = parseInt(elHeader.getStyle('font-size'), 10);
  f--;
  elHeader.setStyle('font-size', f + 'px');
}

Le CSS de elHeader :

    width:100%;
    font-size:40px;
    line-height:36px;
    font-family:Arial;
    text-align:center;
    max-height:36px;
    overflow:hidden;

Notez que le wrapper de elHeader définit la largeur de elHeader.

Answer 2

document.getElementById("divID").style.overflow