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