Javascript 运动中Offset的bug——逐行分析代码,让你

页面导航:首页 > 网络编程 > JavaScript > Javascript 运动中Offset的bug——逐行分析代码,让你

Javascript 运动中Offset的bug——逐行分析代码,让你

来源: 作者: 时间:2016-02-04 09:15 【

我们先来看看这个bug 是怎么产生的。style type=text css div1 { width: 200px; height: 200px; background: red;
我们先来看看这个bug 是怎么产生的。
 
 
<style type="text/css">
            #div1 {
                width: 200px;
                height: 200px;
                background: red;
                
            }
        </style>
 
<body>
        <div id="div1">
            
        </div>
    </body>
以下是用来测试的script代码 ,目的是 让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 即可
 
获取不在行间中的样式 :
 
 
function getStyle(obj, name) {
                if (obj.currentStyle) {
                    return obj.currentStyle[name];
                } else {
                    return getComputedStyle(obj, null)[name];
                }
            }
 
那么我们在修改下原来的代码:
 
 
<script type="text/javascript">
            setInterval(function(){
                var oDiv=document.getElementById("div1");
                
                
                oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';
                
            },30);
            
            function getStyle(obj, name) {
                if (obj.currentStyle) {
                    return obj.currentStyle[name];
                } else {
                    return getComputedStyle(obj, null)[name];
                }
            }
 
        </script>
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<