Question

<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文件。任何人都可以了解一下css的变化可能会在使用$（）时产生这种差异.height（）;

修改

我发现以下css代码，在我评论它们之后，可以正确检索高度，但仍然不知道为什么会发生这种情况，这里是代码

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

身高：自动;是我已经通过的，但身高怎么样：用$（）。height（）;

自动实现

Answer 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());

是否会在特定浏览器上发生这种情况？

Answer 2

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

Answer 3

当所有其他方法都失败时，请阅读实际的高度属性，如下所示：

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

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

Jquery.height（）为img标记返回0

3 个答案: