Jquery Dimention Methods – innerWidth() and innerHeight()

Jquery dimention methods are used to set or return the height and width of a div. Jquery innerWidth() method returns the inner width of a div including padding and innerHeight() returns the height of a div including padding. Here is how to check.

HTML

<div id="box"></div>
<button>Click Here</button>

CSS

#box {
  height: 100px;
  width: 300px;
  padding: 10px;
  border: 1px solid #444;
}

Jquery Script

$(document).ready(function(){
  $("button").click(function(){
    var txt = "";
    txt += "Inner width of div: " + $("#box").innerWidth() + "</br>";
    txt += "Inner height of div: " + $("#box").innerHeight();
    $("#box").html(txt);
  });
});

So inner Width will be 320px including 10+10 pixels and inner height will be 120px. Comment us in the comment box if you are not able to calculate the inner width and height.