Справочник API
.innerHeight() в jQuery
Содержание статьи
-
Категории: CSS, Dimensions, Manipulation › Style Properties
Вычисляет текущее значение высоты первого элемента в наборе jQuery вместе с внутренними отступами (полями) padding, но без учета границ border.
Синтаксис и описание:
Добавлено в jQuery 1.2.6.innerHeight( )
Добавлено в jQuery 1.8.innerHeight( value )
Добавлено в jQuery 1.8.innerHeight( function( index, height ) )
Команда .innerHeight() как геттер возвращает высоту первого элемента набора jQuery вместе с внутренними отступами (
padding), но без границы (border) и без внешнего отступа (margin). Как сеттер (с jQuery 1.8) задаёт такую высоту, чтобы итоговая высота содержимого плюс padding равнялась переданному значению.
Возвращаемое значение: (число | объект) Геттер — число (пиксели, без "px"); сеттер — набор jQuery.
Параметры:
value – (строка | число, с jQuery 1.8) Новое значение высоты с учётом padding. Число — пиксели; строкой можно указать любую CSS-единицу.
function( index, height ) – (функция, с jQuery 1.8) Возвращает новое значение; получает индекс элемента и его текущую innerHeight.
Примечание:
Различие методов размеров jQuery удобно свести в таблицу — от «самого узкого» до «самого широкого» измерения:
Метод Содержимое + padding + border + margin .height() да — — — .innerHeight() да да — — .outerHeight() да да да — .outerHeight(true) да да да да Для ширины действует та же логика: .innerWidth() / .outerWidth() / .outerWidth(true).
Примечание:
Метод неприменим к window и document — для них используйте .height(). Для набора без элементов геттер возвращает
undefined(в версиях до jQuery 3.0 —null).Примечание:
Значение может быть дробным; для скрытых элементов (
display: none) измерение временно и незаметно «показывает» элемент, как и в .height().В jQuery 3.x и 4.0:
Поведение метода не менялось при переходе на 3.x и 4.0. Единственное, что стоит держать в уме при миграции на jQuery 4.0, — правила автоматического
pxв .css() на .innerHeight() не распространяются: сеттер сам корректно подставляет единицу для числового значения.
Примеры:
Получить высоту с учётом padding, без border.
// .box { padding: 20px; border: 5px solid; height: 100px; box-sizing: content-box; } var innerH = $('.box').innerHeight(); // 100 + 20 + 20 = 140Задать высоту с учётом padding (jQuery 1.8+).
$('.box').innerHeight(200); // подберёт content-height так, чтобы + padding было 200pxСравнение всех четырёх методов размеров на одном элементе.
console.log($('.box').height()); // только содержимое console.log($('.box').innerHeight()); // содержимое + padding console.log($('.box').outerHeight()); // содержимое + padding + border console.log($('.box').outerHeight(true)); // содержимое + padding + border + margin