jQuery Width and Height of HTML Element

jQuery provides many functions to extract the dimensions (width and height) of HTML Element. They are

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

Consider a HTML Element with width and height, padding, border and margin set. Following picture demonstrate the results of different methods :

jQuery Width and Height - Dimensions

The following table provides the relation between output of different width, height methods and properties like padding, border and margin.

methodOutput
width()Width of HTML Element
height()Height of HTML Element
innerWidth()width() + Left Padding + Right Padding
innerHeight()height() + Top Padding + Bottom Padding
outerWidth()innerWidth() + Left Border Width + Right Border Width
outerHeight()innerHeight() + Top Border Width + Bottom Border Width
outerWidth(true)outerWidth() + Left Margin + Right Margin
outerHeight(true)outerHeight() + Top Margin + Bottom Margin

Example – Programmatically get Width and Height of a paragraph

To programmatically get width and height of HTML element, we use jQuery width and height methods. Following example demonstrates different width and height functions that consider padding, border and/or margin.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var width = $("#pid").width();
  var innerWidth = $("#pid").innerWidth();
  var outerWidth = $("#pid").outerWidth();
  var outerWidthTrue = $("#pid").outerWidth(true);
  var height = $("#pid").height();
  var innerHeight = $("#pid").innerHeight();
  var outerHeight = $("#pid").outerHeight();
  var outerHeightTrue = $("#pid").outerHeight(true);
  
  $( "#output" ).html("width() : " + width + "<br>");
  $( "#output" ).append("innerWidth() : " + innerWidth + "<br>");
  $( "#output" ).append("outerWidth() : " + outerWidth + "<br>");
  $( "#output" ).append("outerWidth(true) : " + outerWidthTrue + "<br><br>");
  $( "#output" ).append("height() : " + height + "<br>");
  $( "#output" ).append("innerHeight() : " + innerHeight + "<br>");
  $( "#output" ).append("outerHeight() : " + outerHeight + "<br>");
  $( "#output" ).append("outerHeight(true) : " + outerHeightTrue + "<br>");
});
</script>
</head>
<body>

<p style="padding:5px;border:2px solid #CCC;margin:4px;" id="pid">A paragraph</p>
<h2>Paragraph Dimensions</h2>
<p id="output"><p>

</body>
</html>

Conclusion

In this jQuery Tutorial, we have learnt jQuery Width and Height of HTML Element() with the help of examples.