首页 新闻 搜索 专区 学院

利用currentStyle和getComputedStyle取属性值,提示“getComputedStyle”的值为 null、未定义或不是 Functi

1
悬赏园豆:20 [已解决问题] 解决于 2014-10-21 18:47
1 function getStyle(obj,name){
2         if(obj.currentStyle){
3             return obj.currentStyle[name];    
4         }else{
5             return getComputedStyle(obj,false)[name];
6         }    
7 }

我做了一个链式运动,想每个div在鼠标over时先变宽再变高再变opacity;但是只能运行到变宽,

但是,当我只测试其中一个div时,却能运行完整。

我是在ie7下测试的;出现上述提示,请问一下这是怎么回事。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>无标题文档</title>
 6 <style>
 7 div {width:100px;height:100px;background:red;margin-top:10px;opacity:0.3;filter:alpha(opacity:30)}
 8 </style>
 9 <script>
10 window.onload=function (){
11     var div=document.getElementsByTagName('div');
12     var box=document.getElementById('box');
13    //单个能正常运行
14     /*box.onmouseover=function (){
15         move(box,'width',200,function (){
16             move(box,'height',200,function (){
17                 move(box,'opacity',100)    
18             })
19         })    
20     }*/
21  //运行每个div时错
22     for(var i=0;i<div.length;i++){
23         
24         div[i].onmouseover=function (){
25             move(this,'width',200,function (){
26                 move(this,'height',200,function (){
27                     move(this,'opacity',100)    
28                 })    
29             })    
30         }    
31     }    
32 }
33 function getStyle(obj,name){
34         if(obj.currentStyle){
35             return obj.currentStyle[name];    
36         }else{
37             return getComputedStyle(obj,false)[name];
38         }    
39 }
40 function move(obj,attr,target,fn){
41     clearInterval(obj.timer);
42     obj.timer=setInterval(function (){
43         var icur=0;
44         if(attr=='opacity'){
45             icur=parseInt(parseFloat(getStyle(obj,attr))*100)    
46         }else{
47             icur=parseInt(getStyle(obj,attr));    
48         }
49         var speed=(target-icur)/8;
50         speed=speed>0?Math.ceil(speed):Math.floor(speed);
51         if(icur==target){
52             clearInterval(obj.timer);
53             if(fn)
54             {
55                 fn();    
56             }    
57         }else{
58             if(attr=='opacity'){
59                 icur+=speed;
60                 obj.style.opacity=icur/100;
61                 obj.style.filter='alpha(opacity:'+icur+')';    
62             }else{
63                 obj.style[attr]=icur+speed+'px';    
64             }    
65         }
66     },30)    
67 }
68 </script>
69 </head>
70 
71 <body>
72 <div id="box"></div>
73 <div></div>
74 <div></div>
75 <div></div>
76 </body>
77 </html>
wstpa的主页 wstpa | 初学一级 | 园豆:151
提问于:2014-10-01 19:59
< >
分享
最佳答案
1

跟IE没关系,是作用域的问题,把this存一下,当你鼠标移上去的时候,i已经变成了3了,所以不认识后面的this了,既然它不认识当前的DIV了,所以就运动到宽度后面,就不运动了,如果你还是没看懂,可以留言。

for(var i=0;i<div.length;i++){
             
             div[i].onmouseover=function (){
                 var that=this;
                 move(that,'width',200,function (){
                     move(that,'height',200,function (){
                         move(that,'opacity',100)    
                     })    
                 })    
             }    
         }    
收获园豆:20
马斯塔 | 初学一级 |园豆:124 | 2014-10-01 21:10

确实是这样的,非常感谢你。不过,我以前写tab选择卡时,用的是下面的代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 .active {background:yellow}
 8 #div1 div {width:200px;height:200px;background:#ccc;display:none}
 9 </style>
10 <script>
11 window.onload=function ()
12 {
13     var odiv=document.getElementById('div1');
14     var obtn=odiv.getElementsByTagName('input');
15     var adiv=odiv.getElementsByTagName('div');
16     
17     for (var i=0;i<obtn.length;i++)
18     {
19         obtn[i].index=i;
20         obtn[i].onclick=function ()
21         {
22             for (var i=0;i<obtn.length;i++)
23             {
24                 adiv[i].style.display="";
25                 obtn[i].className="";
26             }    
27                 this.className="active";
28                 adiv[this.index].style.display="block";
29         }
30     }    
31 }
32 </script>
33 </head>
34 
35 <body>
36 <div id="div1">
37     <input class="active" type="button" value="国际" />
38     <input type="button" value="体育" />
39     <input type="button" value="关注" />
40     <input type="button" value="动态" />
41     <div style="display:block"> 1111111</div>
42     <div>22222222</div>
43     <div>333333</div>
44     <div>44444444</div>
45 </div>
46 </body>
47 </html>

但是我试着把19行obtn[i].index=i;改成你的那种var index=this;或者var index=i;却使28行的adiv[this.index].style.display="block";失效,,这又是为什么啊,

wstpa | 园豆:151 (初学一级) | 2014-10-01 21:44

@wstpa: 没明白你的失效是什么意思

马斯塔 | 园豆:124 (初学一级) | 2014-10-04 15:18
其他回答(2)
0

currentStyle不就是ComputedStyle吗?

519740105 | 园豆:5810 (大侠五级) | 2014-10-01 22:47

写两个是为了兼容

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

obtn[i].index=i和var index=this;或者var index=i;不是一回事,obtn[i].index=i是给对象obtn[i]加了一个属性,比如

<input class="active" type="button" value="国际" index="0" />

<input type="button" value="体育"  index="1"  />

<input type="button" value="关注" index="2"   />

<input type="button" value="动态" index="3"  />

前端菜鸟:http://www.bird100.cn

谭小斌 | 园豆:202 (菜鸟二级) | 2016-09-07 15:30
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册