jQuery Dimensions

The jQuery library includes various methods to manipulate DOM element's dimensions like height, width etc. When writing reusable plugins , you often want to set or animate an element's width and height that include its padding, border, or margin. This is especially important in plugins that allow custom styling.

jQuery DOM Element's Dimensions Manipulation

jQuery provides six functions that we can use to get the height and width of an element.

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery width() and height() Methods

The jQuery width() and height() methods get or set the width and the height of the element respectively. This width and height doesn't include padding, border and margin on the element.

 
#boxDiv {
  height: 100px;
  width: 200px;
  border: 1px solid red;
}
var boxWidth = $("#boxDiv").width();
var boxHeight = $("#boxDiv").height();

The above code will return the width and height of the boxDiv element.

innerWidth() and innerHeight() Methods

The jQuery innerWidth() and innerHeight() methods returns the inner width and the inner height of the element, includes padding, respectively.

 
#boxDiv {
  height: 100px;
  width: 200px;
  padding: 20px;
  margin: 5px;
  border: 2px solid black;
  background-color: yellow;
}
var boxWidth = $("#boxDiv").innerWidth();
var boxHeight = $("#boxDiv").innerHeight();

The above code will return the Inner width and Inner height of the boxDiv element.

InnerHeight = height + padding on both side = 100 + 20 + 20 = 140
InnerWidth = width + padding on both side = 200 + 20 + 20 = 240

outerWidth() and outerHeight() Methods

The jQuery outerWidth() and outerHeight() methods returns the outer width and the outer height of the element respectively. This outer width and height includes padding and border but excludes the margin on the element.

 
#boxDiv {
  height: 100px;
  width: 200px;
  padding: 20px;
  margin: 5px;
  border: 2px solid black;
  background-color: yellow;
}
var boxWidth = $("#boxDiv").outerWidth();
var boxHeight = $("#boxDiv").outerHeight();

The above code will return the Outer width and Outer height of the boxDiv element.

OuterHeight = height + padding + border = 100 + 20 + 20 + 2 + 2= 144
InnerWidth = width + padding + border = 200 + 20 + 20 +2 +2 = 244

outerWidth(true) and outerHeight(true)

The jQuery outerWidth(true) and outerHeight(true) methods returns the outer width and the outer height of the element respectively includes padding, border, and margin.

 
#boxDiv {
  height: 100px;
  width: 200px;
  padding: 20px;
  margin: 5px;
  border: 2px solid black;
  background-color: yellow;
}
var boxWidth = $("#boxDiv").outerWidth(true);
var boxHeight = $("#boxDiv").outerHeight(true);

OuterHeight(true) = height + padding + border + margin = 100 + 20 + 20 + 2 + 2 + 5 + 5= 154
InnerWidth(true) = width + padding + border + margin = 200 + 20 + 20 +2 +2 +5 +5 = 254

Try it Yourself

#boxDiv { height: 100px; width: 200px; padding: 20px; margin: 5px; border: 2px solid black; background-color: yellow; }

Width:

Inner Height:

Outer Width:

Outer Width(true)

Full Source

 
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
      $("button").click(function(){
        var boxWidth = $("#boxDiv").width();
        var boxHeight = $("#boxDiv").height();
        $("#width").html("Width: " + boxWidth + ", " + "Height: " + boxHeight);
        boxWidth = $("#boxDiv").innerWidth();
        boxHeight = $("#boxDiv").innerHeight();
        $("#innerwidth").html("Inner Width: " + boxWidth + ", " + "Inner Height: " + boxHeight);
        boxWidth = $("#boxDiv").outerWidth();
        boxHeight = $("#boxDiv").outerHeight();
        $("#outerwidth").html("Outer Width: " + boxWidth + ", " + "Outer Height: " + boxHeight);
        boxWidth = $("#boxDiv").outerWidth(true);
        boxHeight = $("#boxDiv").outerHeight(true);
        $("#outerwidthtrue").html("Outer Width(true): " + boxWidth + ", " + "Outer Height(true): " + boxHeight);
      });
  });
</script>
<style>
#boxDiv {
  height: 100px;
  width: 200px;
  padding: 20px;
  margin: 5px;
  border: 2px solid black;
  background-color: yellow;
}
</style>
</head>
<body>
  <div id="boxDiv">
    #boxDiv {
      height: 100px;
      width: 200px;
      padding: 20px;
      margin: 5px;
      border: 2px solid black;
      background-color: yellow;
    }
  </div>
  <br>
  <button>Click me</button>
  <p id="width"></p>
  <p id="innerwidth"></p>
  <p id="outerwidth"></p>
  <p id="outerwidthtrue"></p>
</body>
</html>

Next : jQuery Selectors