jQuery outerHeight( [margin] ) Method

« Previous Chapter Next Chapter »

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:

Example

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:

Example

<html>
<head>
   <script type="text/javascript"  src="../../js/jquery-2.2.0.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:redd;"></div>
   <div id="div3" style="background-color:#123456;"></div>
   <div id="div4" style="background-color:#f11;"></div>
</body>
</html>
                                        
Code It Online

« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!