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>
这样程序运行就不会有任何问题了。