retrieve width value with JQuery

Question

I would like to retrieve some values with JQuery but there is one problem for width value. I just test it :

alert($("#j_idt14\\:panelGrid label").parent().attr('id'));
alert("width :" + $("#j_idt14\\:panelGrid label").parent().css("width"));
alert("outerWidth :" + $("#j_idt14\\:panelGrid label").parent().outerWidth());
alert("padding right :" + $("#j_idt14\\:panelGrid label").parent().css("padding-right"));
alert("padding left :" + $("#j_idt14\\:panelGrid label").parent().css("padding-left"));
alert("border right width :" + $("#j_idt14\\:panelGrid label").parent().css("border-right-width"));
alert("border left width :" + $("#j_idt14\\:panelGrid label").parent().css("border-left-width"));

and I get :

j_idt14:universe_login
width :453px
outerWidth :463
padding right :8px
padding left :0px
border right width :1px
border left width :1px

but when I verify this values with firebug for j_idt14:universe_login id, I get :

So the width calculated by JQuery isn't the same as Firebug...any idea to explain that ?

Thank you

Answer 1

oh no...my apologizes everyone

my code just run some code AFTER showing these values and modify it, so behaviour looks like correct.

I displayed values on $("#j_idt14\\:panelGrid label").parent().ready(function(){...} whereas I had some forgotten code inside $(document).ready(function(){...}

Sorry again, problem is solved

Answer 2

jQuery provides three methods to calculate width.

1. width()
2. innerWidth()
3. outerWidth()

What you need for width is outerWidth().

Get the current computed width for the first element in the set of matched elements, including padding and border.

Answer 3

You need to use .outerWidth().