What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
JavascriptJqueryCssDomStylesJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
Solution 2 - Javascript
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 - Javascript
-
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 - Javascript
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 - Javascript
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)
innerWidthgives me1200pxouterWidthgives me900px
Totally unexpected in my eyes
*In my case the content is contained in a <iframe>
Solution 6 - Javascript
Agree with all the answers given above.
Just to add in terms of window or browser prospects innerWidth/ innerheight includes just window content area, nothing else, but
outerWidth/ outerHeight includes windows content area and in addition to this it also includes things like toolbars, scrollbars etc... and these values will be always equal or greater than innerWidth/innerHeight values.
Hope it helps more...