Метод innerHeight

Метод innerHeight позволяет получать и изменять высоту элемента с учетом его внутренних отступов. Важно помнить, что мы будем получать 'вычисленное значение' высоты (англ. computed height). Ошибки в вычислении могут также возникать, если пользователь меняет размеры страницы, а также, если элемент или его родитель скрыты. Значение высоты не учитывает толщину границы элемента.

Синтаксис

Получить высоту элемента. В некоторых случаях полученные значения могут быть дробными:

$(селектор).innerHeight();

Чтобы изменить высоту элемента - можно передать просто число (к примеру 400), тогда единицы измерения будут пиксели, либо строку, с указанием единиц измерения (к примеру '10em'):

$(селектор).innerHeight(новое значение);

Также мы можем применить заданную функцию к каждому элементу в наборе. При этом первым параметром функция получит номер элемента в наборе, а вторым параметром - текущее значение заданной высоты для конкретного элемента. this внутри функции будет указывать на текущий элемент. Значение высоты элемента поменяется на то, которое вернет функция:

$(селектор).innerHeight(function(номер в наборе, текущее значение высоты));

Пример

Давайте для сравнения выведем информацию о высоте абзаца #test, полученной методами height и 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);

Мы увидим разницу в 10px, что является суммой наших верхнего и нижнего внутренних отступов.

Смотрите также

метод height,
который позволяет получать и изменять высоту элемента
метод outerHeight,
который позволяет получать и изменять высоту элемента, учитывая его отступы и границу