❮❮ PREV NEXT ❯❯

HTML METHODS - outerHeight()

The outerHeight() method is used to get the height(That includes Padding and Border) of an HTML element.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p style = "background-color:violet; height:100px; padding:15px; margin:10px; border:5px solid black;"> Hello World </p>
        
        <button> Click it </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	alert("The outer height of the p element is : "+$('p').outerHeight());
            });
            
      	</script>
  	</body>
</html>

Output :

So, if we look at the above code, we have a <p> element.

<p style = "background-color:violet; height:100px; padding:15px; margin:10px; border:5px solid black;"> Hello World </p>

That has height 100px, padding 15px, margin 10px and border 10px.

And on button click, the JQuery statement gets triggered,

$('button').click( function() {
	alert("The outer height of the p element is : "+$('p').outerHeight());
});

And an alert is generated,

alert("The outer height of the p element is : "+$('p').outerHeight());

Now, if we see the output (i.e. The alert),

You get the outer height of the <p> element (i.e. 140).

This is because the height of the element is 100px. And the padding is 15px.

Just note that the outerHeight() method takes the height of the element and also the padding and border.

Now, if you see the above diagram, the height of the element is 100px and we will be taking the padding from the top(i.e. 15px) and from the bottom (i.e. 15px).

Also the border length is taken from top(i.e. 5px) and bottom(i.e. 5px).

i.e. 15px(Padding from the top) + 15px(Padding from the bottom) + 5px(Border from top) + 5px(Border from bottom) +100px(Height of the element)

i.e. 1400px

And thus the outer height (After taking the element height, padding and border) of the element is 140px.

❮❮ PREV NEXT ❯❯