Javascript 运动中Offset的bug解决方案

2024-05-06 14:48:40

字体：大中小

来源：转载

供稿：网友

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

代码如下:
<style type="text/css">
            #div1 {
                width: 200px;
                height: 200px;
                background: red;

            }
        </style>

代码如下:
<body>
        <div id="div1">

        </div>
    </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 为什么会出现这种情况。

上一篇：使用javascript实现Iframe自适应高度

下一篇：jQuery中height()方法用法实例