The jQuery innerHeight() method returns or sets the inner height of the selected element. The value of height includes the padding and not the border and margin of the element.
If the element already contains some height, the method overwrites the inner height of the specified element. It also includes the padding when it sets the inner height.
Syntax of jQuery innerHeight() Method
The syntax of this method is given below:-
Description of the Parameters
The description of the parameters are given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the selector to select the elements and return or sets the inner height. You can tag name, class name, or id of the elements to select. |
| value | It is the value of inner height to set for the selected element. It can be in px, em, etc. |
jQuery innerHeight() Method Returns the Value of Inner Height
If you want to get the inner height of the selected element, you have to use the method. It returns the inner height of the element if present in the selected element. See the example below contains the button and the div element. The div element contains some width and height including the padding.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(document).ready(function(){ $('.mygetbtn').click(function(){ var mydivht = $(".divht").innerHeight(); alert(mydivht); }); }); </script> <style> .divht{ width:100px; height:100px; border:1px solid #ccc; padding:20px; } </style> <button type="button" class="mygetbtn">Click to Return Inner Height</button><br><br> <div class="divht"></div> |
Output
When you click the button given above, it returns the inner height of the element including the padding. You will get the inner height in the alert box.
How to Set Inner Height Value
You can also set the inner height of the element. The inner height is the height including the padding of the element. It sets the inner height in the size format px, em, etc. If the select already contains some height, it overwrites the height with the specified one.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $('.mysetbtn').click(function(){ $(".divsetht").innerHeight("200"); }); }); </script> <style> .divsetht{ width:100px; height:100px; border:1px solid #ccc; padding:20px; } </style> <button type="button" class="mysetbtn">Click to Set Inner Height</button><br><br> <div class="divsetht"></div> |
Output
Click the button given above to see the height changes with the specified height. The above output showing the difference when you click on the button element.
You may also like to read
I hope you like this tutorial on jQuery innerHeight() method. If you have any queries regarding the tutorial, please comment below.
References