avascript 运动中Offset的bug解决方案

这篇文章主要介绍了Javascript 运动中Offset的bug解决方案,需要的朋友可以参考下

我们先来看看这个bug 是怎么产生的。

代码如下:

1 <style type="text/css">
2             #div1 {
3                 width: 200px;
4                 height: 200px;
5                 background: red;
6                 
7             }
8 </style>

代码如下:

1 <body>
2         <div id="div1">
3             
4         </div>
5     </body>

以下是用来测试的Javascript代码，目的是让div慢慢变窄。

代码如下:

<script type="text/javascript">
           setInterval(function(){
               var oDiv=document.getElementById("div1");
               
               oDiv.style.width=oDiv.offsetWidth-1+'px';
               
           },30);
</script>

Javascript 代码很简单，运行一下没有任何问题，如愿的div在慢慢变小。

那这个offset 的bug又是怎么来的呢？

下面我们动动样式就会神奇的事情发生了。。。

我们给div1 加个样式 border: 1px solid #CCCCFF;

代码如下:

<style type="text/css">
           #div1 {
               width: 200px;
               height: 200px;
               background: red;
               border: 1px solid #CCCCFF;
           }
</style>

此时在运行代码，发现div 居然往右边慢慢增大。。。image BUG 惊现。。。。明明是减1 为什么会出现这种情况。

让我们想想offset 有什么特点：

举例： div width : 200px border 1px 。实际上他得到的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 即可

获取不在行间中的样式：

代码如下:

1 function getStyle(obj, name) {
2                 if (obj.currentStyle) {
3                     return obj.currentStyle[name];
4                 } else {
5                     return getComputedStyle(obj, null)[name];
6                 }
7  }
8

那么我们在修改下原来的代码：

代码如下:

 1 <script type="text/javascript">
 2             setInterval(function(){
 3                 var oDiv=document.getElementById("div1");
 4                 oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';
 5             },30);
 6             function getStyle(obj, name) {
 7                 if (obj.currentStyle) {
 8                     return obj.currentStyle[name];
 9                 } else {
10                     return getComputedStyle(obj, null)[name];
11                 }
12             }
13 </script>

这样程序运行就不会有任何问题了。