Javascript 运动中Offset的bug解决方案

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

代码如下:

}

代码如下:

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

代码如下:

oDiv.style.width=oDiv.offsetWidth-1+'px';

},30);

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

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

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

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

代码如下:

此时在运行代码 ，发现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 即可

获取不在行间中的样式 ：

代码如下:

mputedStyle(obj,null)[name]; } }

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

代码如下:

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：创建js对象和js类的方法汇总下一篇：Javascript 多物体运动的实现