jQuery img.attr('width') 返回零.. IE7答案

【问题标题】：jQuery img.attr('width') returns zero.. IE7jQuery img.attr('width') 返回零.. IE7
【发布时间】：2011-09-30 13:14:39
【问题描述】：

适用于所有浏览器，除了

查看这个例子，iE7 中的http://jsfiddle.net/uVRbG/1。

但是，当我从对象中删除样式 display:none 时，它可以正常工作：

http://jsfiddle.net/uVRbG/2/

我不明白，我只是想要硬编码的值...对象当时是否可见都无关紧要。有没有其他方法可以获取宽度和高度？

注意：我需要 document.ready 的宽度和高度，我不能等待所有这些图像加载完毕然后使用 img.width();

HTML：

<div id="test" style="display:none">
<img src="http://neuro.amygdala.net/wp-content/uploads/2007/11/i-stress-test.gif" width="100" height="100" />
</div>

<div id="result"></div>
<div id="result2"></div>

Javascript：

$('#result').html($('#test img:first').attr('width'));
$('#result2').html($('#test img:first')[0].getAttribute('width'));

谢谢，卫斯理

【问题讨论】：

请在问题中包含您的代码，如果您愿意，请包含 jsFiddle 链接作为补充。
无法升级到最新的jQuery？
@ŠimeVidas 不，我不能，我只是注意到它在 1.6.3 中有效 - （只有第一个 .attr('width')，第二个 .getAttribute('width') 仍然没有不行——你知道为了解决这个问题而改变了哪些内部结构吗？呵呵..我猜不是.. :(
@Wesley getAttribute('width') 不是 jQuery 方法，它是内置在浏览器中的，所以你不能指望它在升级 jQuery :P 时开始工作。为什么不能升级？
@mblase75 不要认为这是重复的，这个问题是关于 .width() - 这是关于 .attr('width') （并且没有正确回答）

标签： javascript jquery image internet-explorer-7 attr

【解决方案1】：

您可以只使用 jquery.hide() 而不是 display none，并在隐藏之前将宽度存储在变量中吗？

【讨论】：

我猜这行得通？隐藏它，获取宽度，然后显示它？
jQuery 实际上会在您隐藏对象时为您保存它。来自文档：匹配的元素将立即隐藏，没有动画。这大致相当于调用 .css('display', 'none') ，只是 display 属性的值保存在 jQuery 的数据缓存中，以便稍后可以将 display 恢复到其初始值。跨度>
我想我也可以这样做：检查 attr 是否小于零。如果不是，显示 div，再次获取 attr，然后再次隐藏 div？这么快就看不到了？还是不行？

【解决方案2】：

.width()

可能会对你有所帮助，但至于 IE7 为什么会出现这个问题，我认为可能与你的选择器有关。

我一直在 IE 中使用 :first 和 :last 伪选择器时遇到问题，它可能只是没有选择图像。 .attr() 与 display:none afaik 没有任何错误。

希望对你有帮助

编辑：尝试将此添加到您的小提琴中：

var imgWidth = $($('#test').html()).attr('width');
alert(imgWidth);

有点笨拙的解决方法，但可能会奏效。我已经尝试过并且无法使用 IE7 进行测试，当我加载 jsfiddle 时会引发脚本错误 >:(

编辑：最后的手段，一个正则表达式：

var imgWidth = $('#test').html().search(/width=[\"\'][0-9]+/);
alert(imgWidth);

【讨论】：

我只是改变了小提琴，删除了 :first 但问题仍然存在。 .width() 需要加载图像，我需要 document.ready 的宽度 - 它就在源代码中，为什么他们不能只返回那个..
谢谢，有趣的想法，但它不起作用；图像里面没有 HTML。我需要outerHTML。但也许我会尝试克隆对象？虽然这一切都增加了内存使用量..会更新告诉你这是否有效..
好吧，克隆也返回零......不幸的是。
你确实给了我一个想法：var result = thumbnail.parent().html().match(/width=["']?([0-9]+)/)) ; -- 正则表达式..这里的每个人似乎都讨厌..但它有效..
这将是我的第二个建议 :)

【解决方案3】：

尝试使用

.width()

改为

http://jsfiddle.net/uVRbG/3/

【讨论】：

阅读我的笔记，我说我不能使用 img.width() 因为这需要加载所有图像，我不能等待那么久。（对吗？）

【解决方案4】：

试试这个解决方法：使用visibility:hidden;position:absolute 而不是display:none。然后图像被加载并定位，因此可以计算宽度。

以后要显示图片时，同时改回position:relative。

http://jsfiddle.net/uVRbG/7/

【讨论】：

这是一个不错的解决方法，如果我找不到其他解决方案，我会记住它（但最好我想要一些不那么脏的东西；））

【解决方案5】：

您必须等待图像加载后才能获得宽度！

【讨论】：

不，我想要我在 HTML 代码中设置的属性，供大家阅读 - .attr('width') 立即在所有浏览器中工作，除了
这是我用来尽可能快地获得宽度的方法：$('img'). one("load",function(){ width= $(this).width(); // 用宽度做你想做的事情 }).each(function(){ if(this.complete) $(this).触发器（“加载”）；}）；
嗯，这仍然与加载图像一样快。我想要 HTML 中已经存在的属性/属性。理论上，甚至不应该加载任何图像来获取此值。