用JS获取页面一个display:none的div里的img的width和height，不管怎么获取都是0，求支招
0
悬赏园豆：15
[已解决问题]
解决于 2014-09-25 14:24
一个div，display属性为none，里边的img可以获取到正确的src，但高和宽就是为0，why
最佳答案
0
用display为none表示不占用空间了，所以为0啊，用visibility就可以
收获园豆：5
这个思路不错，我试了下可以实现一部分，还有一部分更复杂这个就不适用了
其他回答(3)
0
很大原因可能是图片还没有加载进来，我试了一下，我的可以获取到
1 <html> 2 <head> 3 <title>无标题文档</title> 4 <script> 5 window.onload=function (){ 6 var img=document.getElementById('img'); 7 var width=document.getElementById('width'); 8 var height=document.getElementById('height'); 9 var btn=document.getElementById('btn'); 10 btn.onclick=function (){ 11 width.value=img.width+'px'; 12 height.value=img.height+'px'; 13 } 14 } 15 </script> 16 </head> 17 18 <body> 19 宽：<input type="text" id="width" /><br /> 20 高：<input type="text" id="height" /><br /> 21 <img src="w-2.gif" id="img" /> 22 <input type="button" value="检测" id="btn" /> 23 </body> 24 </html>
//下面的是复制粘贴来的
一般获取图片高度宽度的写法：
var img = new Image();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);
但chrome中测试 无法获取到。img.width, img.height都为0
原因:当图片不是本地图片,而是网络图片
onload 在成功地装载了图像时调用的事件处理程序。
在做web开发，其中有一个需求：利用Javascript获取要加载的图片的尺寸，所以很自然的，想到了img的onload方法，在firefox下开发完成后，到IE下调试，发现img的onload事件很多情况下都不被调用。
最初的代码如下：
var img = new Image;
img.src = "test.gif";
img.onload = function(){
alert ( img.width );
};
这段代码看着没什么问题，但是为什么onload没有被IE调用呢？因为IE会缓存图片，第2次加载的图片，不是从服务器上传过来的，而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢？我于是我测试了以下代码，成功了～
var img = new Image;
img.onload = function(){
alert ( img.width ); };
img.src = "test.gif";
把onload写到前面去，先告诉浏览器如何处理这张图片，再指定这张图片的源，这样就正常了。所以，不是IE没有触发onload事件，而是因为加载缓冲区的速度太快，以至于没有运行到img.onload的时候，onload事件已经触发了。这让想到了Ajax，在写xmlhttp的时候，都是先指定onstatechange的回调函数，然后再send数据的，道理是一样的
收获园豆：5
不是这个原因，只要外层的div我设成display：block就能正确获取宽高，现在是怎样获取display：none的div里边的img宽和高
@吃俺老孙一棒:
1 <html> 2 <head> 3 <title>无标题文档</title> 4 <style> 5 * {margin:0;padding:0} 6 #box {display:none} 7 </style> 8 <script> 9 window.onload=function (){ 10 var img=document.getElementById('img'); 11 var width=document.getElementById('width'); 12 var height=document.getElementById('height'); 13 var btn=document.getElementById('btn'); 14 15 btn.onclick=function (){ 16 width.value=img.width+'px'; 17 height.value=img.height+'px'; 18 } 19 } 20 </script> 21 </head> 22 23 <body> 24 宽：<input type="text" id="width" /><br /> 25 高：<input type="text" id="height" /><br /> 26 <div id="box"> 27 <img src="w-2.gif" id="img" /> 28 </div> 29 <input type="button" value="检测" id="btn" /> 30 </body> 31 </html>
但是我设置了display：none还是能获取到，你用的什么浏览器
@wstpa: chrome，firefox都不行
@吃俺老孙一棒: 那就不知道了（浏览器版本问题），我的代码我试了一下，都能获取到
0
用Jquery
0
下面的代码可以实现你要的的功能，display为none也可以，我测试了
<html> <head> <title> New Document </title> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var img = $("#img_id"); var pic_real_width, pic_real_height; $("<img/>").attr("src", $(img).attr("src")).load(function() { pic_real_width = this.width; pic_real_height = this.height; alert(pic_real_width+","+pic_real_height) }); }); </script> </head> <body> <img src="img/select.png" id="img_id" style="display:none"/> </body> </html>
希望能帮到你！
收获园豆：5
方法不错，但不适用于我的程序
