Высота скрытого блока

185

24 июля 2018, 20:40

Как можно определить высоту блока, который лежит в скрытом блоке?

Например:

.outter { 
  display: none; 
}

<div class='outter'> 
  <div class='inner'>Текст текст текст текст  
текст текст текст текст текст текст текст текст текст текст текст текст текст 
текст текст текст текст текст текст текст текст текст текст текст текст текст 
текст текст текст текст текст текст текст текст текст текст текст</div> 
</div>

Так вот как определить высоту блока inner в данном примере? Функция $('.inner').height(); всегда выдаёт 0

Суть в том, что при загрузке странице этот блок скрыт, а открывается он по определенному событию (по клику). Я пытался навешивать ещё один слушатель на клик и в нем вызывать функцию, но $('.inner').height(); всё равно выдаёт 0, т.к. эти слушатели вызываются одновременно и в тот момент времени блок ещё остаётся скрытым

Answer 1

Чтобы узнать высоту нужно показывать элемент, ок, давайте мы его просто сделаем прозрачным (невидимым), тогда, при клике мы сможем получить высоту и просто убрать прозрачность, вернув его свойства "по дефолту", вот пример:

$(document).on('click', '#btn', function() { 
  var cur_height = $('.outter').height(); 
  $('.outter').css({'position': 'inherit', 'opacity': '1', 'z-index': 'auto'}); 
  console.log('Высота блока с классом outter = ' + cur_height); 
});

.outter { 
  position: absolute; 
  opacity: 0; 
  z-index: -1; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='outter'> 
  <div class='inner'>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div> 
</div> 
 
<button id="btn">А нука покажись!</button>

Answer 2

Все верно, высота элемента 0, так как у родителя высота 0, если хотите узнать высоту блока просто удалите display:none у родителя и после этого вызовите .height() .