Is this behaviour, unique to chrome, odd or the proper outcome?
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/
加载中,请稍侯......
精彩评论