¿Cómo se puede medir el espacio que tomará un texto en Javascript?

Question

En Javascript, tengo una cierta cadena, y me gustaría de alguna manera medir cuánto espacio (en píxeles) tomará dentro de un elemento determinado.

Básicamente lo que tengo es un elemento que flotará por encima de todo (como una información sobre herramientas), y tengo que establecer su ancho manualmente a través de Javascript, por lo que se ajustará al texto dentro.
No puedo permitir que "aumente automáticamente" como un elemento en línea crecerá horizontalmente para contener a sus hijos.

En Windows hay API que hacen esto. ¿Hay alguna manera de hacer lo mismo en Javascript?
Si no hay una forma decente, ¿qué enfoque cree que es factible? (Como probar diferentes anchos y verificar la altura para asegurarse de que no superó un cierto umbral).

Cuanto menos "valores de píxeles" pueda codificar en mi JS, mejor, obviamente.

Answer 1

probar esto

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

Answer 2

Esto es fácil usando un marco de JavaScript. Estoy usando Prototype en este ejemplo.

<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

Teniendo en cuenta este código HTML <span>text here</span> usted tiene que leer el atributo offsetWidth de la luz, que sólo se asigna cuando el propio elemento se agrega a la DOM y sin un estilo que lo hace invisible. Técnicamente, lo que esto significa es que el navegador debe poder cargar visualmente el elemento en el DOM para poder construir y asignar el atributo offsetWidth.

Algo como esto funcionaría:

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