Récuperer la largeur d'affichage d'un texte

Commenter

Contenu du snippet

Salut,
Je me demandais tout à l'heure comment on pouvait faire pour récuperer la largeur d'un texte ... Quand je dis "largeur", je ne veux pas dire le nombre de caractères, mais plutôt la largeur que va prendre le texte si on l'affiche sur une page. Bah en fait, c'est pas si évident. Du coup, j'ai trouvé cette solution là. Elle vaut ce qu'elle vaut : c'est un peu du bricolage puisqu'on doit attendre que la page soit chargée avant de l'utiliser. Sinon, ça provoque une erreur.

Source / Exemple : 


<html>
   <head>
      <script type="text/javascript">
         String.prototype.computeDisplayWidth = function(font, size)
         {
            var oText, oSpan, width;
            oText = document.createTextNode(this);
            oSpan = document.createElement("span");
            oSpan.style.fontFamily = font;
            oSpan.style.fontSize = size;
            oSpan.appendChild(oText);
            document.body.appendChild(oSpan);
            width = oSpan.offsetWidth + "px";
            document.body.removeChild(oSpan);
            return width;
         }
         
         window.onload = function()
         {
            alert("Coucou".computeDisplayWidth("Georgia", "11px"));
         }
      </script>
   </head>
   <body>
   
   </body>
</html>

Conclusion :


Plutôt que de définir une fonction indépendante et tout ça, je l'ai directement ajoutée comme méthode du prototype de l'objet String. Voilà !
N'hésitez pas à laisser des commentaires. C'est pas grand chose comme source, mais si ça peut aider quelqu'un :) ...

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (LocalStone)