zajke zajke - 1 month ago 8
CSS Question

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

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.

zod zod
Answer

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