Is this behaviour, unique to chrome, odd or the proper outcome?_问答_开发者

Is this behaviour, unique to chrome, odd or the proper outcome?

开发者 https://www.devze.com 2023-02-10 15:54 出处：网络

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.

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.

});

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.

Images are displayed as inline and doesnt give width/height when parent is hidden (in Chrome).

Set your images to display:block; and Chrome will you your width/height. Check this: http://jsfiddle.net/c4jdv/