让我们先看看这个bug是如何产生的。

复制代码代码如下所示：



{ # DIV1

宽度：200px；

身高：200px；

背景：红色；



}





复制代码代码如下所示：













下面是用于测试的Javaｓｃｒｉｐｔ代码，其目的是缓慢地缩小div。

复制代码代码如下所示：



setInterval（）{（）函数（

无功odiv = document.getelementbyid（联赛）；



ODiv。风格。宽度= odiv offsetwidth-1 + 'px；



}，30）；





Javaｓｃｒｉｐｔ代码非常简单，运行时没有任何问题，因为所需的div是慢慢变小的。

那么偏移错误是如何产生的呢

在这里，我们移动的风格，它会发生。

我们添加一个样式边框：1px solid # ccccff到DIV1；

复制代码代码如下所示：



{ # DIV1

宽度：200px；

身高：200px；

背景：红色；

边境：1px solid # ccccff；

}





在这一点上，代码正在运行，并发现div正在慢慢地增加到右边。图像错误……很清楚为什么这是减少1的情况。

让我们来考虑一下偏移的特性：

例如：div的宽度：200px边框1px。事实上，他得到的是202px offsetwidth。

所以，让我们说回来，运动开始时，DIV是200px，然后offsetwidth 202。

在这个时候odiv。风格。宽度= odiv。offsetwidth-1 + 'px；这句话等于odiv。风格。宽度= 202-1 = 201px；然后分配一个值的宽度

当这句话再次执行时，DIV的宽度201px；这样，每次增加1px，越来越多。这是偏移的bug。

你是怎样解决这个问题的

事实上，你不需要使用这个offsetwidth。我们使用宽度！直接编写函数以获得CSS样式的宽度

获取不在该行中的样式：

复制代码代码如下所示：

功能getstyle（obj，name）{

如果（obj。currentstyle）{

返回的对象。currentstyle {姓名}；

{人}

返回getcomputedstyle（obj，null）{姓名}；

}

}



所以我们在修改原始代码：

复制代码代码如下所示：



setInterval（）{（）函数（

无功odiv = document.getelementbyid（联赛）；

ODiv。风格。宽度= parseInt（getstyle（odiv，'width '））- 1 + 'px；

}，30）；

功能getstyle（obj，name）{

如果（obj。currentstyle）{

返回的对象。currentstyle {姓名}；

{人}

返回getcomputedstyle（obj，null）{姓名}；

}

}







这个程序运行不会有问题。