tiempo - ¿Cómo se puede medir el espacio que un texto tomará en Javascript?
calcular tiempo transcurrido javascript (3)
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á sobre todo lo demás (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 "crezca automáticamente" como un elemento en línea que crezca 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 un camino decente, ¿qué enfoque crees que es factible? (Como probar diferentes anchos y verificar la altura para asegurarse de que no superó un cierto umbral).
Cuantos menos "valores de píxeles" pueda codificar en mi JS, mejor, obviamente.
Dado este texto HTML <span>text here</span> debes leer el atributo offsetWidth del span, que solo se asigna cuando el elemento se agrega al DOM 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
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>