Getting the real width

[richtestani]

Using JQuery, I was working on getting the width of a collection ‘li’ elements.
In my style sheet, I have it set to 54px with 5px on padding and margins.

var width = $('li').width();

Reports 54. Just as I’ve defined.
So I went ahead and added the margins and padding to it as well.

width = width +

parseInt($(li).css('padding-left')) +

parseInt($(li).css('padding-right')) +

parseInt($(li).css('margin-left')) +

parseInt($(li).css('margin-right'))

Sooooo, is this the way I would go and get the real width of elements?

Thanks
Rich

[Johnnyb]

You can use jquery’s ‘innerWidth’ property: http://api.jquery.com/innerWidth/ to measure the width plus padding, but unfortunately that doesn’t take into account the margins.

[jamygolden]

outerWidth(true) includes margins.

[Johnnyb]

Nice, very useful, didn’t know about that one!

[richtestani]

Wow – thank @jamy_za and @johnnyb
Very helpful.

[Author]

Posts