# Метод 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`,
  который позволяет получать и изменять высоту элемента, учитывая его отступы и границу

← →
↑