Introduction to jQuery innerHeight()
innerHeight() is an integral method of jQuery. It computes the current inner height for the first matched element as well as sets the height for each matched element. The computation from the method innerHeight() method incorporates the padding value along with the actual height of the element but not the margin or the border value as shown in the diagram below.
This method is compatible with the browsers- Google Chrome, Internet Explorer, Firefox, Opera and Safari.
Syntax:
| Syntax | Value Type | Parameter description | Version |
| $(selector).innerHeight() | NA | Does not accept any argument. | 1.0 |
| $(selector).innerHeight (Value) | Handler: Number/ String. | Value: A numerical value to be set as the height of the matched element. | 1.8.0 |
| $(selector).innerHeight (Function) | Function:
Function. |
Function: It accepts the index of the element, old inner height as an input argument and returns the new inner height for the matched element to be set. | 1.8.0 |
Examples of jQuery innerHeight()
Given below are the examples of jQuery innerHeight():
Example #1 – Without using any parameter
Without any input argument given, the innerHeight() method is used to read the inner height value including the padding value, for the first matched element.
This method acts as a read-only property for the window. Hence the height values are static and can be edited only from CSS file or in <style> session.
The below code snippet is written to get the height for the div element using the innerHeight() method. A script function is written to show the output from innerHeight() for any div session out of the four div elements that are defined with different color, margin, border thickness, and padding value, on click.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$( "p" ).text( "InnerHeight for div1 session:" + $( "#div1" ).innerHeight()+ " InnerHeight for div2 session:" + $( "#div2" ).innerHeight()+ " InnerHeight for div3 session:" + $( "#div3" ).innerHeight());
});
});
</script>
</head>
<body style="background-color: beige;">
<div id="div1" style="height:50px;width:50px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br>
<div id="div2" style="height:100px;width:100px;padding:10px;margin:3px;border:1px solid blue;background-color:lightgreen;"></div><br>
<div id="div3" style="height:150px;width:150px;padding:10px;margin:3px;border:1px solid blue;background-color:lightsalmon;"></div><br>
<p></p>
<button>Click here to display heights of the div sessions</button>
</body>
</html>Output:
Before innerHeight() method is called:
After innerHeight() method is called:
The current height for all the <div> sessions are displayed on click of the button ‘Click here to display heights of the div session’
Example #2 – With ‘value’ parameter
The syntax, innerHeight(value), is programmed to update the height of the selected element to the input argument value.
Considering the below example, the jQuery event, innerHeight(), is called on the <div> session. A script is written to update the height of the div session to new value on the button click.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
//InnerHeight() is used to set the height to 500px
$("div").innerHeight(500)
$( "p" ).text( "InnerHeight for div session:" + $( "div" ).innerHeight() );
});
});
</script>
</head>
<body style="background-color: beige;">
<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br>
<p></p>
<button>Click here to update the inner height of div</button>
</body>
</html>Output:
Before innerHeight() method is called:
Current height:100px
After innerHeight() method is called:
Updated height: 500px
Example #3 – innerHeight() With ‘function’ parameter
This syntax of the innerHeight(function) method accepts any function as an input argument. The argument method can be defined with or without input arguments.
The function ChangeDivStyle() is defined to regulate the styling parameter for <div> sessions. The function is designed to change the back ground color of the session and increase the height of the element by 100px. The return value of ChangeDivStyle() is passed to innerHeight() method as input argument. The <div> session height gets updated to the value obtained from ChangeDivStyle() function once the button is clicked.
Code:
<!DOCTYPE html>
<html>
<body>
<div id="idDiv" style="height:100px;width:350px;padding:50px;margin:3px;border:1px solid blue;background-color:lightblue;">This is the div session</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//The height of the div element is decided by the function output of myfunc() and //given as input argument to innerHeight()
$(document).ready(function(){
$("button").click(function(){
$("div").innerHeight(ChangeDivStyle());
$( "p" ).text( "InnerHeight for div session:" + $( "div" ).innerHeight());
});
});
function ChangeDivStyle()
{
document.getElementById("idDiv").style.backgroundColor="Grey";
return 100+$( "div" ).innerHeight()
}
</script>
<body style="background-color: beige;">
<button>Click here to call innerheight()</button>
<p></p>
</html>Output:
Before innerHeight() method is called:
After innerHeight() method is called:
Screen 1: The button is triggered once.
Expected inner height result = Height of the element (100px + Paddingvalue(50px+50px) )+ 100px(Added in the function ChangeDivStyle()=300px
Screen 2: The button is trigerred twice.
Expected inner height result = Previous inner height of the element including padding value (300px)+ 100px(Added in the function ChangeDivStyle()
Additional Note
- The default unit for the return value of this method is pixels.
- The method returns ‘undefined’ as resultant value in case the element set is empty valued.
- The method innerHeight() with parameter enables the user to modify the height of any element dynamically during run time.
- innerHeight() may exhibit less accurate results if the matched element or its parent element is in a hidden state. Such an erroneous results can be avoided by ensuring the visibility state of the element to set to be true and again reverting back to the hidden state once the execution of the method is completed. This work around ensured the accuracy, but reliability is not guaranteed.
- A browser may not include any API to detect fractional erroneous condition for site dimensions. If the code assumes an integer value for a fractional result, it may present incorrect dimensions when the site page is used with a zoom feature.
- InnerHeight(), OuterHeight() and Height() exhibit almost similar functionality i.e. performing computation on value of height of an element.
The difference lies in between them in terms of inclusion or padding, margin, and border values as follows:
- Height() computes only the inner height of the matched element.
- InnerHeight() computes the height of the element including the padding value.
- OuterHeight() computes the height of the element adding both padding and border value.
Recommended Articles
This is a guide to jQuery innerHeight(). Here we discuss the introduction to jQuery innerHeight() along with examples respectively. You may also have a look at the following articles to learn more –
