首页 > web前端 > js教程 > Javascript 运动中Offset的bug解决方案_javascript技巧

Javascript 运动中Offset的bug解决方案_javascript技巧

WBOY
发布: 2016-05-16 16:24:43
原创
1181 人浏览过

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

复制代码 代码如下:


复制代码 代码如下:


       

           
       

   

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

复制代码 代码如下:


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 即可

获取不在行间中的样式 :

复制代码 代码如下:

function getStyle(obj, name) {
                if (obj.currentStyle) {
                    return obj.currentStyle[name];
                } else {
                    return getComputedStyle(obj, null)[name];
                }
            }

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

复制代码 代码如下:



 
这样程序运行就不会有任何问题了。
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板