利用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>
最佳答案
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
确实是这样的，非常感谢你。不过，我以前写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: 没明白你的失效是什么意思
其他回答(2)
0
currentStyle不就是ComputedStyle吗？
写两个是为了兼容
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
