JQuery получает высоту скрытого элемента

Я пытался получить список значений высоты элемента, но он возвращал 0.
Я провел некоторое исследование и увидел, что для того, чтобы получить высоту элемента, этот элемент должен быть видимым.
Но я хочу проверить его высоту, когда он скрыт. Если его высота больше некоторого значения, используйте некоторые функции, а затем сделайте ее видимой. Есть ли способ сделать это?

Я имею в виду:

  • Проверить высоту скрытого элемента.
  • Если оно имеет значение OK, сделайте его видимым.
  • Если у него нет требуемого значения, выполните некоторые функции.
  • Сделать видимым.

Ответы

Ответ 1

Вы можете show элемент получить высоту, а затем скрыть ее, визуально вы не увидите никакой разницы.

var height = $('elementSelector').show().height();
$('elementSelector').hide();
if(height != <<HeightToCompare>>){
    //Code here
}
//Finally make it visible
$('elementSelector').show();

Демо

Ответ 2

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

Итак, у вас есть:

<div id="maybe" style="display: none;">
  Something
</div>

Поскольку вы используете jQuery, вы бы сделали что-то вроде этого:

$('#maybe')
  .clone()
  .attr('id','maybe_clone') // prevent id collision
  .css({                    // position far outside viewport
    'position': 'absolute',
    'left': '-1000px'
  });

if( $('#maybe_clone').show().height() > 200 ) {
  $('#maybe').show();
}

$('#maybe_clone').remove();       // housekeeping