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

4

3 回答 3

0

当一切都失败时，读取实际的高度属性，如下所示：

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

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

于 2013-07-07T09:26:07.110 回答
0 
var $img = jdialog.find('img');    
$img.load(function(){
    console.log($img.height());
});
于 2013-07-07T06:07:39.610 回答
0

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

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

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

于 2013-07-07T05:29:44.413 回答