Справочник API
.height() в jQuery
Содержание статьи
-
Категории: CSS, Dimensions, Manipulation › Style Properties
Вычисляет текущее значение высоты первого элемента в наборе jQuery или задает CSS высоту для всех элементов набора.
Синтаксис и описание:
Добавлено в jQuery 1.0.height( )
Добавлено в jQuery 1.0.height( value )
Добавлено в jQuery 1.4.1.height( function( index, height ) )
Как геттер .height() возвращает высоту содержимого (content-box: без padding, border и margin) первого элемента набора jQuery — числом, без единицы измерения. Как сеттер — задаёт CSS-высоту всех элементов набора.
Метод работает не только с обычными элементами, но и с window (высота видимой области окна браузера) и document (полная высота документа, включая то, что видно только при прокрутке).
Возвращаемое значение: (число | объект) Геттер — число (пиксели, без "px"); сеттер — набор jQuery.
Параметры:
value – (строка | число) Новая высота. Число трактуется в пикселях; строкой можно указать любую CSS-единицу (
"50%","10em") или"auto".function( index, height ) – (функция, с jQuery 1.4.1) Возвращает новое значение высоты; получает индекс элемента и его текущую высоту.
Примечание:
.height() всегда возвращает высоту именно содержимого, независимо от значения CSS-свойства
box-sizing. Это отличает её от.css('height'), который отдаёт вычисленное значение свойстваheightкак оно определено в CSS (дляbox-sizing: border-box— высоту рамки целиком, включая padding и border). Если нужна высота с учётом padding и/или border, используйте .innerHeight() или .outerHeight() — сравнение методов см. на странице .innerHeight().Примечание:
Значение может быть дробным (например, при масштабировании страницы браузером) — не стоит рассчитывать на целое число без явного округления.
Примечание:
Для элемента со
display: noneкорректно измерить высоту нельзя: jQuery временно и незаметно «показывает» такой элемент, чтобы снять размеры, что на больших страницах может стоить лишней перерисовки.В jQuery 3.x и 4.0:
Поведение .height()/.outerHeight() не менялось: методы по-прежнему считают content-box высоту независимо от
box-sizing, а числовые значения — без единицы. Изменение автоматического добавленияpxв jQuery 4.0 (см. .css()) на .height() не влияет: этот метод как принимал, так и принимает число или строку с явной единицей и сам подставляетpxпри записи числа.
Примеры:
Чтение и запись высоты элемента, высота окна и документа.
var h = $('#box').height(); // число без "px", например 240 $('#box').height(300); // применится как height: 300px var winHeight = $(window).height(); // высота видимой области окна var docHeight = $(document).height(); // полная высота документаНовое значение через функцию — ступенчатая высота карточек в списке.
$('.card').height(function(index, oldHeight) { return oldHeight + index * 10; });Отличие от .css('height') при
box-sizing: border-box: .height() вернёт высоту без padding/border, а .css('height') — значение свойства CSS как есть (полную высоту рамки).// .card { box-sizing: border-box; height: 200px; padding: 20px; border: 5px solid; } console.log($('.card').css('height')); // "200px" — как задано в CSS console.log($('.card').height()); // меньше 200 — высота без padding и border