HTML METHODS - innerHeight()

The innerHeight() method is used to get the height(That includes Padding) 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 inner height of the p element is : "+$('p').innerHeight());
            });
            
      	</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 inner height of the p element is : "+$('p').innerHeight());
});

And an alert is generated,

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

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

You get the inner height of the <p> element (i.e. 130).

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

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

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).

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

And thus the inner height of the element is 130px.

❮❮ PREV NEXT ❯❯