Copyright © tutorialspoint.com

# jQuery - outerHeight( [margin] ) Method

# Description:

The outerHeight( [margin] ) method gets the outer height (includes the border and padding by default) for the first matched element.

This method works for both visible and hidden elements. It is not supported for elements that are indirectly hidden by consequence of a parent being hidden.

# Syntax:

Here is the simple syntax to use this method:

    selector.outerHeight( [margin] )

## Parameters:

Here is the description of all the parameters used by this method:

- margin: This optional argument when set to true the margin of the element will be included in the calculations.

# Example:

Following is a simple example a simple showing the usage of this method:

    <html>
    <head>
    <title>the title</title>
       <script type="text/javascript"
       src="/jquery/jquery-1.3.2.min.js"></script>
       <script type="text/javascript" language="javascript">

       $(document).ready(function() {

         $("div").click(function () {
          var color = $(this).css("background-color");
          var height = $(this).outerHeight();
          $("#result").html("Outer Height is <span>" +
                             height + "</span>.");
          $("#result").css({'color': color,
                            'background-color':'gray'});
          $("#result").height( height );
        });

       });

       </script>
       <style>
          #div1{ margin:10px;padding:12px;
                 border:2px solid #666;
                 width:60px;}
          #div2 { margin:15px;padding:5px;
                  border:5px solid #666;
                  width:60px;}
          #div3 { margin:20px;padding:4px;
                  border:4px solid #666;
                  width:60px;}
          #div4 { margin:5px;padding:3px;
                  border:3px solid #666;
                  width:60px;}
      </style>
    </head>
    <body>
       <p>Click on any square:</p>
       <span id="result"> </span>
       <div id="div1" style="background-color:blue;"></div>
       <div id="div2" style="background-color:pink;"></div>
       <div id="div3" style="background-color:#123456;"></div>
       <div id="div4" style="background-color:#f11;"></div>
    </body>
    </html>

To understand it in better way you can Try it yourself.

Copyright © tutorialspoint.com