Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

jQuery 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:

  1. $(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.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  5. <script>
  6. $(document).ready(function(){
  7.     $(“button”).click(function(){
  8.         alert(“Outer height of the div is: ” + $(“div”).outerHeight());
  9.     });
  10. });
  11. </script>
  12. </head>
  13. <body>
  14. <div style=“height:100px;width:500px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;”></div><br>
  15. <button>Click here to get the outer height of the div</button>
  16. </body>
  17. </html>

Test it Now

jQuery outerHeight() example 2

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

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <meta charset=“utf-8”>
  5.   <title>outerHeight demo</title>
  6.   <style>
  7.   div {
  8.     width: 60px;
  9.     padding: 10px;
  10.     height: 100px;
  11.     float: left;
  12.     margin: 5px;
  13.     background: Orange;
  14.     cursor: pointer;
  15.   }
  16.   .mod {
  17.     background: green;
  18.     cursor: default;
  19.   }
  20.   </style>
  21.   <script src=“https://code.jquery.com/jquery-1.10.2.js”></script>
  22. </head>
  23. <body>
  24. <div>A</div>
  25. <div>B</div>
  26. <div>C</div>
  27. <div>D</div>
  28. <div>E</div>
  29. <script>
  30. var modHeight = 80;
  31. $( “div” ).one( “click”, function() {
  32.   $( this ).outerHeight( modHeight ).addClass( “mod” );
  33.   modHeight 8;
  34. });
  35. </script>
  36. </body>
  37. </html>

Comments

comments