Comment pouvez-vous mesurer l'espace qu'un texte prendra en Javascript?

Question

En Javascript, j'ai une certaine chaîne, et je voudrais mesurer en quelque sorte l'espace (en pixels) qu'il faudra dans un certain élément.

Fondamentalement, ce que j'ai est un élément qui flottera au-dessus de tout le reste (comme une infobulle), et j'ai besoin de définir sa largeur manuellement via Javascript, donc il s'ajustera au texte à l'intérieur.
Je ne peux pas l'avoir "auto-grow" naturellement comme un élément en ligne se développerait horizontalement pour contenir ses enfants.

Dans Windows, il existe des API qui font cela. Y a-t-il un moyen de faire la même chose en Javascript?
S'il n'y a pas de moyen décent, quelle approche pensez-vous faisable? (Comme, essayer différentes largeurs et vérifier la hauteur pour s'assurer qu'il ne dépasse pas un certain seuil). Les moins de "valeurs de pixels" que je peux coder en dur dans mon JS, mieux c'est, évidemment.

Answer 1

essayer cette

http://blog.mastykarz.nl/measuring-the-length-of-a-string-in-pixels-using-javascript/

Answer 2

C'est facile à l'aide d'un framework JavaScript. J'utilise Prototype dans cet exemple.

<span id='text' style='border:1px solid #000000;font-size:14px'>hello this is sample text</span> 

<script type="text/javascript"> 
alert($('text').getWidth()) 
</script> 

Answer 3

Compte tenu de cette HTML <span>text here</span> vous devez lire l'attribut offsetWidth de la durée, qui, sans un style est attribué uniquement lorsque l'élément lui-même est ajouté au DOM qui le rend invisible. Techniquement, cela signifie que le navigateur doit être capable de charger visuellement l'élément dans le DOM pour pouvoir construire et assigner l'attribut offsetWidth.

Quelque chose comme ça fonctionnerait:

var span = document.createElement("span"); 
span.appendChild(document.createTextNode("text here")); 

span.style = ""; // to make sure the elment doesn't have "display: none" or such 
document.body.appendChild(span); // adding it to the DOM 

var textWidth = span.offsetWidth; 

// be sure to hide or remove the span if you don't need it anymore