Почему jQuery возвращает значение null для высоты div?

$(document).ready(function(){

  function getDocumentHeight()
  {
     // What the page height?
     var height = $('#mainbody').height();
     alert(height);
   ...
 getDocumentHeight();  }

jQuery сохраняет предупреждение null для высоты моего div #mainbody. Я не понимаю, почему это должно быть, по крайней мере, 500px или так.

Ответ 1

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

UPDATE: Попробуйте разместить свой код в

$(window).load(function() {
  var height = $('#mainbody').height();
  alert(height);
});

вне вашего

$(document).ready();

Ответ 2

Если вы используете шаблон для своей разметки, например, с помощью angular или ember, используйте тег script и вызывайте script из шаблона.

<script type="text/javascript" src="/js/script.js"></script>

Ответ 3

С задержкой в 100 мс хорошо работает для меня. Без задержки не работает.

setTimeout(function(){
    var imgWidth = $('#id').width();
    var imgHeight = $('#id').height();
    console.log(imgWidth);
    console.log(imgHeight);
}, 100);