Finding width of text

jerimorris · September 6th, 2003, 10:58 AM

Hi,

I'm using JavaScript and DOM to position DIVs and SPANs on a page. It would be a lot easier if I could figure out the width of text within a DIV or SPAN without having to explicitly set it.

For example, if I have a SPAN with the text "abcde," and I haven't explicitly set the width of the SPAN, is there a way I can determine the width in pixels of either the SPAN element or the text within it? (I'm not using a fixed-width font, so I can't calculate the width based on the number of characters.)

Thank you in advance for your help!

Jeri
jerimorris2000 @ yahoo . com

Imar · September 7th, 2003, 05:29 AM

Hi Jeri,

I am not 100% sure, but I don't think you can do that. Consider the following example:

Code:

<html>
<head>
  <title>Test Width</title>
  <script language="JavaScript" type="text/javascript">
  function TestMe()
  {
    alert(document.getElementById('spTest').style.width);
  }
  </script>
</head>
<body>
  <span id="spTest">This is a test</span>
  <input type="button" value="Click" onclick="TestMe();">
</body>
</html>

If you run this, and click the button, you'll get an empty dialog box, indicating that the width is empty / null / undetermined.

If you change the span tag to this:

Code:

  <span id="spTest" style="width: 100px">

the dialog box will now show "100px". So I am afraid that it looks like the browser won't tell you how wide an element is if you haven't explicitly stated it first.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

joefawcett · September 7th, 2003, 06:57 AM

May work if you use currentStyle instead of style. Also try using offsetWidth.

--

Joe

Imar · September 7th, 2003, 12:40 PM

Yeah, I thought about using currentStyle too, but it returns "auto" :-(

The offsetWidth, however, does the trick:

Code:

alert(document.getElementById('spTest').offsetWidth);

returns 87 which is indeed the exact size of the text in the <span> tag. Notice that offsetWidth is used directly on the object, not on the style property as in my example.....

Nice!

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

jerimorris · September 8th, 2003, 02:34 PM

Folks,

Thank you so much for your replies! offsetWidth is exactly what I was looking for!

Happily,

Jeri