| 标题 | Javascript 运动中Offset的bug解决方案 |
| 内容 | 我们先来看看这个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 为什么会出现这种情况。 让我们想想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> 这样程序运行就不会有任何问题了。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。