0

我有一个常规 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，这是包含的 #a 元素的高度#b 和图像，而不是图像的预期高度，即 186，并在 HTML 中设置为属性。

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

如何在 Chrome 中获取图像的实际原始高度？是否可以使用简单的 jQuery 来做到这一点，或者我必须做一些噱头（比如将图像重新加载到单独的对象中并检查其原始高度）？

4

2 回答 2

1

CSS 通常优于height属性。要使用 jQuery，请使用.css：

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

哪个会回到186px这里。如果您只想186使用.height：

$("#image").height();
于 2013-09-20T12:15:45.027 回答
0

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;
  }
于 2013-09-20T13:05:17.270 回答