Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery width() returns 0 for a span element created on the fly?

Tags:

jquery

width

I'm trying to determine the width of a string. I'm using the following code but it always return 0. It seems to be that as the span element is created and not already present in the page body, jQuery width() returns 0. Is there a way such that I can get the width of the text without resorting to creating dummy html code in the page?

Thanks :)

$('<span>test</span>').width(); // width = 0
$('span.width').width(); // returns a width value

<body><span class="width">test</span></body>
like image 237
Lyon Avatar asked Mar 26 '10 17:03

Lyon


2 Answers

The element must be present in the DOM in order for the width to be calculated. If you need to calculate this before the user can see the element, try hiding it before putting it into the DOM.

like image 121
Josh Stodola Avatar answered Oct 24 '22 08:10

Josh Stodola


You can try adding the control with the css property visibility: hidden to the page before getting the size, therefore avoiding the need to make the element visible.

There is no way to get the width without adding the control, as alot of different things may interfer with the width.

like image 1
Jan Jongboom Avatar answered Oct 24 '22 06:10

Jan Jongboom