Получение высоты скрытых элементов с помощью jQuery

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

Неэффективный подход

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

Альтернативное решение

jQuery предлагает более эффективное решение:

1. Изменить атрибуты элемента: Временно манипулировать атрибутами стиля элемента:

   • Установить абсолютную позицию (необязательно, если элемент уже имеет абсолютное позиционирование)
   • Установить скрытую видимость (сделать элемент невидимым)
   • Установить отображение заблокированным (сделать элемент видимым, но не в основном потоке документов)
2. Мера Высота: Получите высоту элемента, используя метод jQuery .height().
3. Восстановить атрибуты: Сбросьте атрибуты стиля элемента до их исходных значений, используя метод attr() или установив свойство style напрямую.

Пример кода

var previousCss = $("#myDiv").attr("style");

$("#myDiv").css({
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
});

var optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

Этот метод позволяет незаметно измерить высоту скрытого элемента, не влияя на макет или видимость страницы. .