The outerHeight() method in jQuery is used to return the height of an element. The method includes padding and border.
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.
Let us now see an example to implement the jQuery outerHeight() method−
<!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>
This will produce the following output−
Click the “Outer height of div” button to get outer height−