Javascript 运动中Offset的bug解决方案
我们先来看看这个bug是怎么产生的。
<styletype="text/css"> #div1{ width:200px; height:200px; background:red; } </style>
<body> <divid="div1"> </div> </body>
以下是用来测试的Javascript代码,目的是让div慢慢变窄。
<scripttype="text/javascript"> setInterval(function(){ varoDiv=document.getElementById("div1"); oDiv.style.width=oDiv.offsetWidth-1+'px'; },30); </script>
Javascript代码很简单,运行一下没有任何问题,如愿的div在慢慢变小。
那这个offset的bug又是怎么来的呢?
下面我们动动样式就会神奇的事情发生了。。。
我们给div1加个样式border:1pxsolid#CCCCFF;
<styletype="text/css"> #div1{ width:200px; height:200px; background:red; border:1pxsolid#CCCCFF; } </style>
此时在运行代码,发现div居然往右边慢慢增大。。。imageBUG惊现。。。。明明是减1为什么会出现这种情况。
让我们想想offset有什么特点:
举例:divwidth:200px border1px 。实际上他得到的offsetWidth是202px。
那么,我们说回来,运动刚开始的时候,实际上div的宽度是200px 那么offsetWidth是202
这个时候oDiv.style.width=oDiv.offsetWidth-1+'px';这句话就是等于oDiv.style.width=202-1=201px;然后在赋值给width
当再次执行这句话的时候div的宽度是201px;这样的话,每次都会增加1px,反而慢慢变大了。这就是offset的bug。
怎么解决这个问题呢?
其实不用这个offsetWidth就可以了。我们用width!!写个函数直接获取css样式中width即可
获取不在行间中的样式:
functiongetStyle(obj,name){ if(obj.currentStyle){ returnobj.currentStyle[name]; }else{ returngetComputedStyle(obj,null)[name]; } }
那么我们在修改下原来的代码:
<scripttype="text/javascript"> setInterval(function(){ varoDiv=document.getElementById("div1"); oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px'; },30); functiongetStyle(obj,name){ if(obj.currentStyle){ returnobj.currentStyle[name]; }else{ returngetComputedStyle(obj,null)[name]; } } </script>
这样程序运行就不会有任何问题了。