解决使用offsetWidth让DIV自动变宽时出现的小BUG。

来源:互联网 发布:qq空间营销软件 编辑:程序博客网 时间:2024/05/16 08:57

1.首先创建一个DIV盒子。给它加一个定时器,让它的宽度每隔30毫秒自动减1,观看效果。

2.上面的效果没有问题。然后你通过给DIV添加样式,给它加1px的边框。观看效果。


3.这是你会发现,你明明让DIV宽度减1,现在它的宽度会反而变长。

4.这是为什么呢?很明显这是加1px边框引起的问题。解释:因为offsetWidth是包含边框,外边距,内边距,
而DIV的宽度是100px。当你给加1px边框是,offsetWidth=100+2=102,102-1=101。这反而让DIV的宽度反而
增加了一个像素。所有看到的效果就是。DIV的宽度反而增加。


5.那么我们要怎么解决这个bug呢?其实很简单,我们直接给它加行内样式再改js的一行代码就可以解决。如
下图。


6.但是,我们这不是在解决问题,而且现在也不会加行内样式。所以我们要真的解决这个问题。

7.分析发现,其实真正是offsetWidth有问题,那我们就可以想,可不可以把offsetWidth换成其它的代替。
其实是可以的,我们可以创建一个函数,获取div的宽度,然后用函数代替。如下图


8.这才是我们最终要解决的方法。总结:offsetWidth还有很多相识的问题存成,所以我们要尽量少使用

offsetWidth,最好自己定义一个获取样式的函数在开发中调用。