Hii,

In this blog i am going to  share the definition and difference between  different methods of jquery used to calculate  dimensions.

Following are the six different jquery methods used to calculate dimensions as per the requirements

width() : This method is used to calculate CSS width property dynamically.
Example 1: In this example jquery width() method is used to find the width of  the box.

CSS:

#div1{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid rgb(51,102,0);background-color: rgb(102,255,51);}

 HTML:
 

<div class="main">
 <div id="div1"></div>
 <button id="button1">Click on me to get the width of the box</button>
</div>

Javascript:

$("#button1").click(function(){
    var txt = "";
    txt += "Width of this box is: " + $("#div1").width();
    $("#div1").html(txt);
});

height() :  This method is used to calculate CSS height property dynamically.
Example 2: In this example jquery height() method is used to find the height of  the box.
CSS:
 

#div2{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid rgb(192,52,39);background-color: rgb(234,155,33);}

 HTML:
 

<div class="main">
 <div id="div2"></div>
 <button id="button2">Click on me to get the height of the box</button>
</div>

Javascript:

$("#button2").click(function(){
    var txt = "";
    txt += "Height of this box is: " + $("#div2").height();
    $("#div2").html(txt);
});

innerWidth() : This method is used to calculate CSS width property dynamically excluding the border width and including the padding(x axis) given.
Example 3: In this example jquery innerWidth() method is used to find the width of  the box.
CSS:

#div3{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid rgb(204,0,153);background-color: lightblue;}

 HTML:

<div class="main">
 <div id="div3"></div>
 <button id="button3">Click on me to get the innerwidth of the box</button>

</div>

Javascript:

$("#button3").click(function(){
    var txt = "";
    txt += "innerwidth of this box is: " + $("#div3").innerWidth();
    $("#div3").html(txt);
  });

innerHeight() : This method is used to calculate CSS height property dynamically excluding the border height and including the padding(y axis) given.
Example 4: In this example jquery innerHeight() method is used to find the height of  the box
CSS:

#div4{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid blue;background-color: rgb(255,102,255);}

 HTML:

<div class="main">
 <div id="div4"></div>
 <button id="button4">Click on me to get the innerheight of the box</button>
</div>

Javascript:

$("#button4").click(function(){
    var txt = "";
    txt += "innerheight of this box is: " + $("#div4").innerHeight();
    $("#div4").html(txt);
  });

outerWidth() :  This method is used to calculate  CSS width property dynamically including both the border width and padding given.
Example 5 : In this example jquery outerWidth() method is used to find the width of  the box
CSS:

#div5{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid rgb(255,102,102);background-color: rgb(128,0,0);}

 HTML:

<div class="main">
 <div id="div5"></div>
 <button id="button5">Click on me to get the outerwidth of the box</button>
</div>

Javascript:

$("#button5").click(function(){
    var txt = "";
    txt += "outerwidth of this box is: " + $("#div5").outerWidth();
    $("#div5").html(txt);
  });

outerHeight() : This method is used to calculate CSS height property dynamically including both the border width and padding given.
Example 6 : In this example jquery outerHeight() method is used to find the height of  the box
CSS:

#div6{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid #000;background-color:rgb(153,255,204);}

 HTML:

<div class="main">
 <div id="div6"></div>
 <button id="button6">Click on me to get the outerheight of the box</button>
</div>

Javascript:

$("#button6").click(function(){
    var txt = "";
    txt += "outerheight of this box is: " + $("#div6").outerHeight();
    $("#div6").html(txt);
});

Note:  Must include this link in your file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>