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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 410 fois - Téléchargée 19 fois

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

Ajouter un commentaire

Commentaires

Commenter la réponse de cs_bultez

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.