jQuery innerHeight() Method

jQuery HTML/CSS Methods

The innerHeight() method gets or sets the internal height of the selected element (including padding, but not including margin and border).

When using the innerHeight() methodGetWhen setting the height, it returnsThe first selected elementheight.

When using the innerHeight() methodSetWhen setting the height, it will setAll selected elementsheight.

As shown in the figure below, the innerHeight() method includes padding, but does not include border and margin:

The height value can also be relative. If a leading+=or-If the character sequence = is provided, the target height is calculated by adding or subtracting the given number from the current value (for example innerHeight(" + = 100)）。

Syntax:

Get internal height:

$(selector).innerHeight()

Set internal height:

$(selector).innerHeight(value)

Example

Get the internal height of the DIV element:

$("div").click(function(){
　　$(this).innerHeight();
});

Set the internal height of all paragraphs:

$("button").click(function(){
　　$("p").innerHeight()100);
});

Set the internal height of all paragraphs using different unit settings:

$("#btn1").click(function(){
　　$("p").innerHeight()100);
});
$("#btn2").click(function(){
　　$("p").innerHeight("7em);
});
$("#btn3").click(function(){
　　$("p").innerHeight("100vh);
});

Show the difference between width(), height(), innerHeight(), innerWidth(), outerWidth(), and outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Parameter Value

jQuery HTML/CSS Methods