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.