Grab the chance to earn a scholarship!

Study a desired course for free & get money

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.