How can you measure the space that a text will take in Javascript?

Question

In Javascript, I have a certain string, and I would like to somehow measure how much space (in pixels) it will take within a certain element.

Basically what I have is an element that will float above everything else (like a tooltip), and I need to set its width manually through Javascript, so it will adjust to the text inside.
I can't have it "auto-grow" naturally like an inline element would grow horizontally to contain its children.

In Windows there are APIs that do this. Is there a way to do the same thing in Javascript?
If there is no decent way, what approach do you believe is feasible? (Like, trying out different widths and checking the height to make sure it didn't go over a certain threshold).

The less "pixel values" I can hardcode in my JS the better, obviously.

Thanks! Daniel

Answer 1

try this

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

Answer 2

This is easy using a JavaScript framework. I'm using Prototype in this example.

<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

Given this HTML <span>text here</span> you have to read the offsetWidth attribute of the span, which is only assigned when the element itself is added to the DOM without a style that makes it invisible. Technically what this means is that the browser has to be able to visually load the element in the DOM to be able to construct and assign the offsetWidth attribute.

Something like this would work:

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