jQuery outerHeight() Method
The outerHeight() method in jQuery is used to return the height of an element. The method includes padding and border.
Syntax
The syntax is as follows−
$(selector).outerHeight(margin)
Above, the margin is a Boolean value to specify whether or not to include the margin. TRUE is to include the margin.
Example
Let us now see an example to implement the jQuery outerHeight() method−
Live Demo
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
document.getElementById("demo").innerHTML = "<br>Outer Height of DIV = " + $("div").outerHeight()
});
});
</script>
</head>
<body>
<h2>Rectangular Box</h2>
<div style="height:200px;width:500px;padding:30px;margin:1px;background-color:orange;"></div><br>
<button>Outer height of div</button>
<p id="demo"></p>
</body>
</html>Output
This will produce the following output−
Click the “Outer height of div” button to get outer height−
Published on 30-Dec-2019 13:41:46
