jquery.height() 为 img 标签返回 0答案

【问题标题】：Jquery.height() return 0 for an img tagjquery.height() 为 img 标签返回 0
【发布时间】：2013-07-07 17:31:13
【问题描述】：

<script type="text/javascript" src="jquery-1.4.full.js"></script>
<body>
</body>
<script type="text/javascript">
var jdialog = $('<div id="avatar_button_clipdiv" style="width: 668px; height: 425px">\
<img width="668" height="900" src="http://localhost/1_tmp.jpg" style="">\
</div>').appendTo('body');
    console.log(jdialog.find('img'));
    console.log(jdialog.find('img').width(),jdialog.find('img').height());
</script>

这段代码在我把它单独放在另一个文件中后工作正常，height() 返回正确的值而不是 0，但是当我把它放回完整的 HTML 文件时，它返回 0 而不是它的实际值，它很奇怪，不知道什么可能使它的行为有所不同。

我在运行此代码之前编辑了一些 CSS 文件，不记得我编辑了哪些 CSS 行。选择器是正确的，我已经检查了返回对象，无论是单独的代码还是原始代码都没有错HTML 文件。任何人都可以了解在使用 $().height() 时哪些 css 更改可能会产生这种差异；

编辑

我发现了下面的css代码，在我评论它们之后，可以正确检索高度，但仍然不知道为什么会这样，这是代码

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

高度：自动；是我已经发布的内容，但是 height:auto 是如何影响 $().height();

【问题讨论】：

标签： jquery height

【解决方案1】：

您自己共享的代码似乎可以完成这项工作我什至在jsfiddle link 中运行它：

var jdialog = $('<div id="avatar_button_clipdiv" style="width: 68px; height: 125px">\
<img width="50" height="100" src="https://www.google.co.il/images/srpr/logo4w.png" style=""/>\
</div>').appendTo('body');
console.log(jdialog.find('img'));
console.log(jdialog.find('img').width(),jdialog.find('img').height());

这会在特定浏览器上发生吗？

【讨论】：

不，在所有浏览器中都一样，上面的代码工作正常，但是在我把它放回原始html文件后，高度为0，但宽度（）是正确的，我不知道为什么

【解决方案2】：

var $img = jdialog.find('img');    
$img.load(function(){
    console.log($img.height());
});

【讨论】：

没有返回，甚至不是 0

【解决方案3】：

当一切都失败时，像这样读取实际的高度属性：

var height = jdialog.find('img').attr('height');

但如果您需要实际计算的高度，请尝试使用imagesloaded 仅在所需图像完全加载时执行测量功能。传统的“加载”或“就绪”事件会中断缓存图像。

【讨论】：