这种 Chrome 特有的行为是奇怪的还是正确的结果？

发布于 2024-10-17 11:51:07 字数 784 浏览 6 评论 0原文

发现一个涉及 jquery 和 chrome 的奇怪现象。如果周围 div 的显示设置为“none”，img 元素的 attr('width') 似乎会返回 0。不过，这在 Firefox 和 Opera 中效果很好。

那么，这是一个错误还是 chrome 断言了正确的 jquery 行为？

这是一个例子：

<html>
<head>
<script type="text/javascript" src="../jquery-1.4.min.js"></script>
<script type="text/javascript" src="return.js"></script>
</head>

<body>

<div class="foot">
  <img src="images/ref.png" width="500px" height="500px"  />
  <img src="images/ref1.png" width="300px" height="300px"  />
</div>

</body>
</html>

$(document).ready(function(){

$('div.foot').css('display','none');

var imageWidth = $('div.foot img').eq(0).attr('width');

alert(imageWidth); // returns 0 in chrome.

});

原文

Found an oddity involving jquery and chrome. Seems attr('width') for an img element returns 0 if the display of the surrounding div is set to "none". This works fine in firefox and opera though.

So, is this a bug or is chrome asserting the correct jquery behaviour?

Here's an example:

<html>
<head>
<script type="text/javascript" src="../jquery-1.4.min.js"></script>
<script type="text/javascript" src="return.js"></script>
</head>

<body>

<div class="foot">
  <img src="images/ref.png" width="500px" height="500px"  />
  <img src="images/ref1.png" width="300px" height="300px"  />
</div>

</body>
</html>

$(document).ready(function(){

$('div.foot').css('display','none');

var imageWidth = $('div.foot img').eq(0).attr('width');

alert(imageWidth); // returns 0 in chrome.

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生路 2024-10-24 11:51:08

我认为这可能是 Chrome 的一个错误。

首先，我按照上面的方式运行了您的代码。正如您所描述的，它显示“0”。

然后，我尝试了上面的代码，并且能够使用以下代码在开发控制台中显示宽度（500）：

$('div.foot img').eq(0).attr('width');

因此，我将原始代码重写为稍微更小的代码。这按预期显示“500”：

$(document).ready(function(){
    $('div.foot').css('display','none');
    alert($('div.foot img').eq(0).attr('width'));
});

之后，我能够运行您的原始代码并让它发出警报“500”。

$(document).ready(function(){
    $('div.foot').css('display','none');
    var imageWidth = $('div.foot img').eq(0).attr('width');
    alert(imageWidth); // returns 0 in chrome.
});

简短的回答：我很确定这是一个错误，因为它的行为不稳定。

注意：我使用 jQuery 1.4.4 尝试过此操作。

I think this may be a Chrome bug.

First, I ran your code as above. It displayed "0" as you described.

Then, I played around with the above code, and was able to have the width (500) display in the dev console with the following code:

$('div.foot img').eq(0).attr('width');

So, I re-wrote the original code you have to something slightly smaller. This displayed "500" as expected:

$(document).ready(function(){
    $('div.foot').css('display','none');
    alert($('div.foot img').eq(0).attr('width'));
});

After that, I was able to run your original code and have it alert "500".

$(document).ready(function(){
    $('div.foot').css('display','none');
    var imageWidth = $('div.foot img').eq(0).attr('width');
    alert(imageWidth); // returns 0 in chrome.
});

Short answer: I'm pretty sure this is a bug because of its erratic behaviour.

Note: I tried this using jQuery 1.4.4.

回复收藏 0 原文