Question

It’s pretty easy to get the width or height of a Div or Span that contains some non formatted text like for example:

<div>Hello World</div> 

by using JQuery’s width() or height() method. The same doesn’t seem to work for formatted text elements like the example below:

<span id="caption" class="caption" style="left: 406px; top: 357.5px;">
<textformat leading="2">
    <p align="LEFT">
        <font face="Verdana" color="#FFFFFF" size="4" kerning="0" letterspacing="0">
            <b>TYPE</b><b><i>iorad</i></b>and<b>PRESS ENTER</b>
        </font>
    </p>
</textformat>
</span>

This example contains some formatted text elements that display well when we render the html page. But when we try to get the dynamic width or height it either returns 0 or null as shown below:

$(".caption").width() returns 0

Any ideas on a solution to get dynamic width height from jquery or js?

Answer 1

That’s because the HTML code is broken.

You can’t have a block element (p) inside an inline element (span), so the browser tries its best to correct the code. The specific browser that you tried this in did that by moving the block element outside the inline element, leaving the inline element empty.