Come si può misurare lo spazio che un testo assumerà in Javascript?

Question

In Javascript, ho una determinata stringa e mi piacerebbe in qualche modo misurare quanto spazio (in pixel) occuperà all'interno di un determinato elemento.

Fondamentalmente quello che ho è un elemento che galleggia sopra ogni altra cosa (come un suggerimento), e ho bisogno di impostare la sua larghezza manualmente tramite Javascript, quindi si adatterà al testo all'interno.
Non riesco a farlo "auto-crescere" in modo naturale come un elemento in linea crescerebbe orizzontalmente per contenere i suoi figli.

In Windows ci sono API che fanno questo. C'è un modo per fare la stessa cosa in Javascript?
Se non c'è un modo decente, quale approccio credi sia fattibile? (come, provando diverse larghezze e controllando l'altezza per assicurarsi che non superi una certa soglia).

Meno "valori di pixel" posso hardcode nel mio JS meglio è, ovviamente.

Answer 1

provare questo

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

Answer 2

Questo è facile utilizzando un framework JavaScript. Sto usando Prototype in questo esempio.

<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

Dato questo HTML <span>text here</span> si deve leggere l'attributo offsetWidth della campata, che viene assegnato solo quando l'elemento stesso viene aggiunto al DOM senza uno stile che lo rende invisibile. Tecnicamente ciò significa che il browser deve essere in grado di caricare visivamente l'elemento nel DOM per essere in grado di costruire e assegnare l'attributo offsetWidth.

Qualcosa di simile potrebbe funzionare:

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