Question

I’m getting unexpected output from jQuery.css()…

<img src="http://placekitten.com/640/360" alt="" id="original_image" style="left:0px; top:0px;" />

<script>
  var original_image = $('#original_image');

  console.log(original_image.css('left')); //outputs 'auto' :(

  original_image.bind('load', function() {
    console.log(original_image.css('left')); //outputs 'auto' :(
  });

  $(function() {
    console.log(original_image.css('left')); //outputs 'auto' :(
  });

  setTimeout("console.log(original_image.css('left'))", 2000); //outputs '0px' :)
</script>

I would think the output in each one of the console.log() would be ‘0px’… what am I missing?

Answer 1

Be sure to set a position attribute on your image element.

The default for this attribute is position: static. If you are using this style, the top and left attrbiutes will be ignored as an element with static position can not be moved outside of the document flow.