Code has been added to clipboard!

Using jQuery .innerHeight(): Syntax and Examples Provided

Reading time 1 min
Published Jan 19, 2018
Updated Oct 2, 2019

jQuery innerHeight: Main Tips

  • jQuery .innerHeight() sets or returns the inner height of the selected element.
  • You may read more about jQuery height and width methods in this tutorial.

Two Ways of Using innerHeight

By using jQuery .innerHeight() method, you can either get or set the height of the specified element (including padding but excluding borders).

In the example below, an alert indicating the height of the element will show up after you click the button. After you close the alert, the element will change height:

Example
$("button").click(() => {
    alert($("p").innerHeight());
});

$("button").click(() => {
    $("p").innerHeight(80);
});

To return jQuery inner height, you will need to use this syntax:

$(selector).innerHeight();

To set it, we add one parameter that specifies the height to set:

$(selector).innerHeight(newHeight);

Note: the newHeight can be defined in a string, a number, or a function that returns a value to set.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 22/01/2021
3176 People Used
Only 97 Left
Rating
5.0