outerHeight()

The jQuery outerHeight () method is used to return the outer height of first matched element. This method includes padding and border both.

In the above example, you can see that border and padding both are included in the outerHeight() method.

Syntax:

snippet

$(selector).outerHeight(includeMargin)

Parameters of jQuery outerHeight() method

Parameter	Description
includeMargin	This is a Boolean value which specifies whether to include the margin or not. False:It specifies that: Not to include the margin. It is a default value. True:It specifies that: Include the margin.

This is an optional parameter.

Example of jQuery outerHeight() method

Let's take an example to demonstrate the effect of jQuery outerHeight() method.

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Outer height of the div is: " + $("div").outerHeight());
    });
});
</script>
</head>
<body>
<div style="height:100px;width:500px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>
<button>Click here to get the outer height of the div</button>
</body>
</html>

jQuery outerHeight() example 2

Let's take an example to demonstrate how to change the inner height of each div.

snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerHeight demo</title>
  <style>
  div {
    width: 60px;
    padding: 10px;
    height: 100px;
    float: left;
    margin: 5px;
    background: Orange;
    cursor: pointer;
  }
  .mod {
    background: green;
    cursor: default;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<script>
var modHeight = 80;
$( "div" ).one( "click", function() {
  $( this ).outerHeight( modHeight ).addClass( "mod" );
  modHeight -= 8;
});
</script>
</body>
</html>