使用 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>

如您所见，图像上已经设置了高度属性。我的脚本（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！

看起来始终如

一地执行此操作的唯一方法是动态加载图像。我从这里借用了代码："获取动态图像的宽度和高度"。

最后，代码是：

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