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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 429 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

cs_nullite
Messages postés
9
Date d'inscription
mardi 25 janvier 2005
Statut
Membre
Dernière intervention
18 novembre 2009
-
Bravo,
fallait y penser
cs_flexx
Messages postés
42
Date d'inscription
vendredi 28 novembre 2003
Statut
Membre
Dernière intervention
18 août 2010
-
Bon, j'ai trouvé le problème :)

En fait, il faut que le style du texte soit en "position: absolute" sous Opera.

Il faut donc rajouter :
oSpan.style.position = "absolute";

Voilà :)
cs_flexx
Messages postés
42
Date d'inscription
vendredi 28 novembre 2003
Statut
Membre
Dernière intervention
18 août 2010
-
Bonjour

J'ai remarqué qu'il était possible d'obtenir la largeur du texte sans attendre la fin du chargement de la page sous Internet Explorer et Firefox.

Par contre, cela ne marche pas sous Opéra :(
Comment peut-on faire (sans passer par un onload).

Merci
cs_bultez
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
26 -
pour le reste faisons confiance à LocalStone !
"il a tout"... y compris le savoir faire.
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10 -
Bonjour, et il est vrai que je n'est pas beaucoup Forumé ces derniers jours...
[y_a_pa_de_honte]c'est quoi exactement un snippet/y_a_pa_de_honte en anglais cela veut dire un truc comme petit bout, fragment, c'est les morceaux de codes que tu peux trouver en page d'acceuil à la rubrique
Derniers Snippets sur Codyx pour Javascript / DHTML
Bon revenons au code, en relisant j'en ai oublié un autre, paramètre, qui influ sur la taille, c'est le fontStyle si en italic, et il y en a surement d'autre...
Pour tout dire je pensais plus à un truc du style

String.prototype.computeDisplayWidth = function( font, class_)
avec
//-- Affectation de la class si en paramètre
oSpan.className = ( class_ ? class_: '');

et pour le reste faisons confiance à The Bultez
;0)

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.