Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery innerHeight() Method
jQuery | innerHeight() Method: Learn about the jQuery innerHeight() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 16, 2022
innerHeight() Method
It is very important to know the dimensions of the element that has been placed on the web page. It includes – height, width, innerHeight, innerWidth, etc. For example, the container created, and the images used should have a proper dimension ratio in order to make the web page look more professional. That's why we need to have knowledge of the dimensions over here. So, over here, we'll discuss the innerHeight() method in detail.
The innerHeight() method helps to get the inner height of the selected element. The element whose dimensions have to be known is passed here as a selector, and this method gives the numerical value of the height. The innerHeight() method does not return the height including the border and margin. It includes the padding of the element but not the border and margin of the element. This method returns the height of the first matched element.
innerHeight() Method Syntax
$('selector').innerHeight();
It does not accept any parameters. The difference between the height() & innerHeight() method is that, using height() we can also set the value for the element. But using innerHeight(), we get the height of the element including the padding. This way the innerHeight() method works in jQuery.
The below example shows the implementation of this method. When the button provided is clicked, it helps to return the height of the image.
jQuery innerHeight() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>jQuery - Inner Height</h2>
<p>Click the button to get the Inner Height of the image.</p>
<button>Inner Height</button>
<hr>
<img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
<hr>
<h3></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var InHeight = $('img').innerHeight();
$('h3').html('Inner Height of the Image is: ' + InHeight);
})
});
</script>
</html>
Output:
