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 :

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

method	Output
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.

<!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.

TutorialKart

TUTORIALS

SAP

CRM

Apache

GUI

Programming

Databases

Mobile

Web & Server

Testing

jQuery Width and Height of HTML Element – Examples