The innerHeight method

The innerHeight method allows you to get and change the height of an element taking into account its internal padding. It is important to remember that we will get 'calculated value' height. Errors in calculation can also occur if the user changes the page size, or if the element or its parent is hidden. The height value does not take into account the thickness of the element's border.

Syntax

Get the height of an element. In some cases, the resulting values may be fractional:

$(selector).innerHeight();

To change the height of an element, you can simply pass a number (for example, 400), then the units of measurement will be pixels, or a string indicating the units of measurement (for example, '10em'):

$(selector).innerHeight(new value);

We can also apply the given function to each element in the set. In this case, the function will receive the number of the element in the set as the first parameter, and the current value of the given height for a specific element as the second parameter. this inside the function will point to the current element. The value of the element's height will change to the one returned by the function:

$(selector).innerHeight(function(number in set, current height value));

Example

For comparison, let's display information about the paragraph height #test, obtained by the methods height and innerHeight:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

We'll see a difference of 10px, which is the sum of our top and bottom paddings.

The innerHeight method

Syntax

Example

See also