使用jQuery .attr的图像高度获取父元素的大小，而不是Chrome中的实际图像高度属性

Question

我有一个图像是在一个普通的DIV里面。我们称它为DIV b。在DIV b的上面有另一个DIV，我称之为DIV a。DIV a有溢出:隐藏。代码如下：

<div id="a">
  <div id="b">
    <img id="image" src="http://fgjdfgsjh.com/images/hghgajfhsd.jpg" height="186" width="900">
  </div>
</div>

..。下面是本例中一些重要的CSS：

#a {overflow: hidden; height: 128px;}

..。最后是一些.js：

<script>
  $(document).ready(function(){
     var test = $('#image').attr('height');
     alert(test);
  });
</script>

如您所见，图像上已经设置了height属性。我的脚本(jQuery)需要获取这些信息，但是当我使用$('# image ').attr(' height ')时，脚本给我的是数字128，这是包含#b和图像的#a元素的高度，而不是图像的预期高度，后者是186，在HTML中设置为一个属性。

这在Chrome中正在发生。Firefox可以获得正确的图像高度(186，而不是128)。

如何在Chrome中获取图片的实际原始高度？有没有可能用简单的jQuery来做这件事，或者我必须做一些花招(比如在一个单独的对象中重新加载图像并检查它的原始高度)？

Answer 1

CSS通常比height属性更可取。要使用jQuery，请使用.css

$('#image').css('height');

它将在此处返回186px。如果您只想要186，请使用.height

$("#image").height();

Answer 2

Chrome在这个问题上行为反复无常。我尝试了@Mooseman提供的代码，但当反复刷新页面时，脚本有时会弹出128px，有时会弹出186px！

看起来唯一一致的方法就是动态加载图像。我从这里借用了代码："getting width and height of a dynamic image“。

最后，代码是：

  $('<img/>').attr('src', $('#image').attr('src')).load(function() {
    // Then just get the resulting loaded image height by using:
    var myHeight = this.height;
  }