What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery

Question

Did you see these examples? Looks similar to your question.

Working with widths and heights

jQuery - Dimensions

jQuery: height, width, inner and outer

As mentioned in a comment, the documentation tells you exactly what the differences are. But in summary:

• innerWidth / innerHeight - includes padding but not border
• outerWidth / outerHeight - includes padding, border, and optionally margin
• height / width - element height (no padding, no margin, no border)

• width = get the width,

• innerWidth = get width + padding,

• outerWidth = get width + padding + border and optionally the margin

If you want to test add some padding, margins, borders to your .test classes and try again.

Also read up in the jQuery docs... Everything you need is pretty much there

It seems necessary to tell about the values assignations and compare about the meaning of "width" parameter in jq : (assume that new_value is defined in px unit)

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

The three instructions doesn't give the same effect: because the first jquery instruction defines the innerwidth of the element and not the "width". This is tricky.

To get the same effect you must calculate the paddings before (assume var is pads), the right instruction for jquery to obtain the same result as pure js (or css parameter 'width') is :

jqElement.css('width',new_value+pads);

We can also note that for :

var w1 = jqElement.css('width');
var w2 = jqelement.width();

w1 is the innerwidth, while w2 is the width (css attribute meaning) Difference which is not documented into JQ API documentation.

Best regards

Trebly

---

Note : in my opinion this can be considered as a bug JQ 1.12.4 the way to go out should be to introduce definitively a list of accepted parameters for .css('parameter', value) because there are various meanings behind 'parameters' accepted, which have interest but must be always clear. For this case : 'innerwidth' will not mean the same as 'width'. We can find a track of this problem into documentation of .width(value) with the sentence : "Note that in modern browsers, the CSS width property does not include padding"