Get the width in pixels of an element using jquery

Question

I want to get the width of an element including border, margin and padding.

I know using $(input).width() or $(input).css('width') give the width of the element.

But here is the requirement.

Suppose I created a text box like follows:

<input type='text' id='txtBox' name='txtBox' style='width:100%' />

or

<input type='text' id='txtBox' name='txtBox' style='width:auto' />

If I get the width using either $input.css('width') or $input.width(). I am not able to get the width in pixels. I am using jquery1.3.2.

@tster - I am testing using Firefox. But I want to work this for all browsers. — Puru
– Puru, Commented Nov 18, 2010 at 7:01
This should work, when do you try to acess the width() ? — Dr.Molle
– Dr.Molle, Commented Nov 18, 2010 at 7:02
@Dr.Molle - I am having a jquery ui sortable list. I am setting the width of all the list items as 'auto'. When I am sorting I need the width of the list element. — Puru
– Puru, Commented Nov 18, 2010 at 7:04

jAndy · Accepted Answer · 2010-11-18 07:03:36Z

6

That should work just fine.

You are maybe missing to wrap your code into jQuery(document).ready().

answered Nov 18, 2010 at 7:03

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thats working great there. But I don't know why is it not working in my application. I have the jQuery(document).ready().