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

javascript jquery css dom styles

86,381

Solution 1

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

Working with widths and heights

enter image description here

jQuery - Dimensions

jQuery: height, width, inner and outer

Solution 2

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)

Solution 3

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

Solution 4

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"

Solution 5

What I am seeing right now is that innerWidth includes the whole content

This is, if the window is 900px and the content is 1200px (and there's a scroll)

innerWidth gives me 1200px
outerWidth gives me 900px

Totally unexpected in my eyes

*In my case the content is contained in a <iframe>

View more solutions

86,381

Author by

zajke

PHP, C#, Java, Javascript, JQuery...

Updated on July 08, 2022

Comments

zajke almost 2 years

I wrote some example to see what is the difference, but they display me same results for width and height.

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

In this example you can see that they output same results. If anyone know what is the difference please show me appropriate answer.

Thanks.

Benjamin almost 5 years

best answer ever
GWorking over 4 years

I've just posted an answer below since right now I'm seeing a different behavior between the two options that is not infered by your description
Bob Stein about 4 years

Added twist: .css('width') is the same as .outerWidth() (that is, it includes the border as well as the padding) when box-sizing: border-box;.
1j01 over 2 years

innerWidth is less inner than width, go figure.