Определение отрисованной высоты элемента в jQuery

Быстрый ответ

Для определения реальной высоты элемента в jQuery воспользуйтесь методами .height() для измерения без padding и border, .outerHeight() для учета padding и border и .outerHeight(true) для вычисления с учетом margin. Убедитесь, что скрытый элемент видим перед измерением.

let elemHeight = $('#element').height(); // Очистная высота элемента.
let elemOuterHeight = $('#element').outerHeight(); // Высота с учетом padding и border.
let fullHeight = $('#element').outerHeight(true); // Высота с учетом padding, border и margin.

Краткий обзор свойств высоты элемента

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

• .innerHeight(): Получение высоты с учетом padding, но без border и margin.
• getBoundingClientRect(): Предоставляет точные размеры, учитывая CSS-трансформации.
• document.getElementById('element').clientHeight: Вычисление высоты с помощью нативного JavaScript, без учета прокрутки и границ.
• document.getElementById('element').offsetHeight: Вычисление высоты с учетом прокрутки, границ и padding.

Визуализация

Можно представить высоту элемента как уровень воды в стеклянной трубке:

Пустая трубка: ||       Пока пуста – содержимое отсутствует.
Наполнение:    ||💧     Содержимое добавляется, уровень воды повышается. 
                     💧  Именно на этом уровне и определяется реальная высота элемента.
                     💧  Она меняется в зависимости от объема содержимого.

Определение реальной высоты подобно измерению уровня воды в трубке:

let glassHeight = $('#glass').height(); // Сколько воды содержится в нашем "стакане"?

Профессиональные рекомендации по измерению высоты

Вот несколько практических советов по определению высоты элемента:

Измерение скрытых элементов

Для измерения высоты скрытого элемента сначала сделайте его видимым (например, снимите свойство display: none):

$('#hiddenElement').show().height(); // Простой способ.

Подробнее об этом расскажет наш спикер на видео

Отслеживание динамических изменений

При динамическом изменении содержимого обновляйте параметры высоты после соответствующих событий:

$(window).on('load resize', function() {
  let dynamicHeight = $('#dynamicElement').outerHeight();
  // Адаптуруем высоту под изменения.
});

Учет CSS-трансформаций

Метод getBoundingClientRect() помогает учесть влияние CSS-трансформаций на вычисление высоты:

let rectHeight = document.querySelector('.transformedElement').getBoundingClientRect().height;
// С помощью этого метода трансформации не станут препятствием.

Помощь от фреймворков

В проектах на Vue.js используйте this.$refs для доступа к элементам и getBoundingClientRect() для определения их высоты:

let vueHeight = this.$refs['some-ref'].$el.getBoundingClientRect().height;
// С высотой элемента в Vue.js всё под контроле.

Поиск альтернатив jQuery

Не ограничивайтесь использованием jQuery. Освоение нативного JavaScript и других фреймворков расширит ваши возможности:

• Воспользуйтесь альтернативами на JavaScript, представленными на [http://youmightnotneedjquery.com/].
• В Vue.js активно используйте $refs и getBoundingClientRect().
• Методы clientHeight и offsetHeight в JavaScript обеспечивают дополнительные методы измерения высоты.

Полезные материалы

1. .height() | Документация jQuery API — Информация о методе .height() в контексте jQuery.
2. .innerHeight() | Документация jQuery API — Измерение высоты элемента, включая padding.
3. Блочная модель CSS | CSS-Tricks — Информация о блочной модели в CSS.
4. Метод Element: getBoundingClientRect() – Веб-API | MDN — Подробности о методе getBoundingClientRect().
5. .outerHeight() | Документация jQuery API — Документация по методу .outerHeight().
6. Манипулирование элементами | Учебный центр jQuery — Информация о управлении DOM-элементами с помощью jQuery.
7. javascript – Как получить реальные размеры HTML-элемента? – Stack Overflow — Обсуждение методов измерения размеров элементов.