Получение высоты div с отображением: нет, используя метод height (), равный jquery

Question

У меня есть div с style="display:none". После размещения некоторого содержимого внутри я вычисляю его высоту, используя height() метод JQuery. Это работает нормально и возвращает правильную высоту.

Но я наткнулся на эту запись и узнал, что элемент с style="display:none" будет иметь 0 высоту и ширину. Итак, в идеале мне пришлось бы изменить 'display:none' на 'visibility:hidden' и использовать метод height() или использовать другие альтернативы, чтобы получить правильную высоту.

Но тогда как мой код работает при вызове метода height() JQuery на div style="display:none"? Это будет последовательное поведение?

Другими словами, метод height () не делает различий между display: none и display: block. Это последовательное поведение? высота смещения равна 0, если отображение не соответствует ожидаемому.

Answer 1

jQuery.height() и .width() возвращают вычисленный стиль вашего элемента, а не его фактическую высоту и ширину.

То, что для элемента display установлено значение none, изменит только факт эти относительные единицы не могут быть рассчитаны, поэтому вы получите % значений, возвращаемых в процентах.

Кроме этого, нет никакой разницы, поскольку это только вычисленные стили и не фактический размер вашего элемента.

Теперь jQuery сделает все возможное, чтобы преобразовать это процентное значение в фактическое px число, то есть вернет вычисленный размер родительского элемента в соотношении установить, но это только на один уровень глубины.

console.log( 'display-none $height', $('#display-none').height() );
console.log( 'display-block $height', $('#display-block').height() );
console.log( 'display-none-deep $height', $('#display-none-deep').height() );
console.log( 'display-none $width', $('#display-none').width() );
console.log( 'display-block $width', $('#display-block').width() );
console.log( 'display-none computed height', getComputedStyle($('#display-none')[0] ).height );
console.log( 'display-block computed height', getComputedStyle($('#display-block')[0] ).height );
console.log( 'display-block real height', $('#display-block')[0].getBoundingClientRect().height );

div[id^="display"] { 
  height: 50%;
  width: 200px;
  transform-origin: top left;
  transform: scale(1.5,1.5); /* won't change anything for computed values */
}
#display-none {
  display: none;
}
body{ height: 100vh;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="display-none">
  <div id="display-none-deep"></div>
  hidden
</div>
<div id="display-block">visible</div>

Answer 2

In jquery jQuery .height () возвращает фактическую высоту элемента, содержащего «display: none» ИЛИ «видимость: скрытый». Но это может быть изменено в соответствии со стилями дочерних и родительских элементов.

Представьте себе ситуацию, страница HTML содержит только один div и имеет высоту 100px . Тогда Jquery .height () возвращает то же значение, когда мы применили "display: none" ИЛИ "visibility: hidden" в элементе.

Но разница между этими двумя Свойства стиля:

"display: none" : - тег не будет отображаться при рендеринге, но Jquery может взаимодействовать с DOM, поэтому функция, возвращающая фактическую высоту элемента .

"видимость: скрыто" : - появится тег и будет выделена высота 100 пикселей, и на сайте будет видно пустое место.

Для Например, в системе бронирования мест в поездах, если вы зарезервировали место в поезде, которое никто не может использовать, но в общем купе, люди могут использовать это место, когда оно освободится.

Так «display: none» и «visibility: hidden» имеют согласованное поведение в jquery. Но высота будет увеличиваться или уменьшаться для родительского элемента div.

Поэтому, пожалуйста, выберите опцию в соответствии с вашими требованиями, я думаю, что дисплей : none является правильным вариантом для вашего требование.