Total width of element (including padding and border) in jQuery

Question

As in the subject, how can one get the total width of an element, including its border and padding, using jQuery? I've got the jQuery dimensions plugin, and running .width() on my 760px-wide, 10px padding DIV returns 760.

Perhaps I'm doing something wrong, but if my element manifests itself as 780 pixels wide and Firebug tells me that there's 10px padding on it, but calling .width() only gives 760, I'd be hard pressed to see how.

Thanks for any suggestions.

Answer 1

The width method no longer requires the dimensions plugin, because it has been added to the jQuery Core

What you need to do is get the padding, margin and border width-values of that particular div and add them to the result of the width method

Something like this:

var theDiv = $("#theDiv");
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width

Split into multiple lines to make it more readable

That way you will always get the correct computated value, even if you change the padding or margin values from the css

---

[Update]

This answer was written prior to jQuery 1.3, and the functions that existed at the time where not adequate by themselves to calculate the whole width.

Now, as J-P correctly states, jQuery has the funtions outerWidth and outerHeight which include the border and padding by default, and also the margin if the first argument of the function is true

Answer 2

Anyone else stumbling upon this answer should note that jQuery now (>=1.3) has outerHeight/outerWidth functions to retreive the width including padding/borders, e.g.

$(elem).outerWidth(); // Returns the width + padding + borders

To include the margin as well, simply pass true:

$(elem).outerWidth( true ); // Returns the width + padding + borders + margins