Why does jQuery return null for the height of the

问题:

$(document).ready(function(){

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

jQuery keeps alerting null for the height of my #mainbody div. I don't get why, it should at least be 500px or so.

回答1:

If the content is being loaded dynmically, the elements may not have a height yet. Try moving this code to the bottom of the page, directly above and see if that resolves.

UPDATE: Try placing your code in

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

outside of your

$(document).ready();

回答2:

If you are using a template for your markup for example with angular or ember use the script tag and call the script from the template.

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

回答3:

With 100ms delay works well for me. Without delay not working.

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