jQuery how to get innerWidth but without the padding?

Question

From the docs, innerWidth does almost what I need:

"Gets the inner width (excludes the border and includes the padding) for the first matched element."

I need to know the width excluding the padding. I.e. the usable space inside the element.

Does jquery provide anything like this - done a bit of googling and can't find any solutions.

I thought about getting the padding-left and padding-right values to subtract from inner width- But given these could be percentages, pixels or em I'm not sure if this would be reliable.

Any suggestions?

Answer 1

You're probably just looking for the width() function..

See the docs, it excludes the padding: http://api.jquery.com/width/

(Just as intended in modern browser's representation of the css width property)

Edit: It's now 2012 and jQuery 1.8 is just coming out. While this is still relevant, you may also want to read the following article from the jQuery blog regarding box-sizing considerations in version 1.8

Answer 2

$('#element').width(); 

It's as simple as that!