首页 新闻 搜索 专区 学院

用JS获取页面一个display:none的div里的img的width和height,不管怎么获取都是0,求支招

0
悬赏园豆:15 [已解决问题] 解决于 2014-09-25 14:24

一个div,display属性为none,里边的img可以获取到正确的src,但高和宽就是为0,why

吃俺老孙一棒的主页 吃俺老孙一棒 | 初学一级 | 园豆:38
提问于:2014-09-25 09:48
< >
分享
最佳答案
0

用display为none表示不占用空间了,所以为0啊,用visibility就可以

收获园豆:5
湖底的鱼 | 初学一级 |园豆:10 | 2014-09-25 11:07

这个思路不错,我试了下可以实现一部分,还有一部分更复杂这个就不适用了

吃俺老孙一棒 | 园豆:38 (初学一级) | 2014-09-25 14:22
其他回答(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
wstpa | 园豆:151 (初学一级) | 2014-09-25 10:09

不是这个原因,只要外层的div我设成display:block就能正确获取宽高,现在是怎样获取display:none的div里边的img宽和高

支持(0) 反对(0) 吃俺老孙一棒 | 园豆:38 (初学一级) | 2014-09-25 10:49

@吃俺老孙一棒: 

 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还是能获取到,你用的什么浏览器

支持(0) 反对(0) wstpa | 园豆:151 (初学一级) | 2014-09-25 10:56

@wstpa: chrome,firefox都不行

支持(0) 反对(0) 吃俺老孙一棒 | 园豆:38 (初学一级) | 2014-09-25 10:59

@吃俺老孙一棒: 那就不知道了(浏览器版本问题),我的代码我试了一下,都能获取到

支持(0) 反对(0) wstpa | 园豆:151 (初学一级) | 2014-09-25 11:03
0

用Jquery

happydaily | 园豆:674 (小虾三级) | 2014-09-25 10:32
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
火悬崖 | 园豆:434 (菜鸟二级) | 2014-09-25 11:16

方法不错,但不适用于我的程序

支持(0) 反对(0) 吃俺老孙一棒 | 园豆:38 (初学一级) | 2014-09-25 14:23
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册