Javascript 运动中Offset的bug解决方案


Posted in Javascript onDecember 24, 2014

我们先来看看这个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>

 
这样程序运行就不会有任何问题了。
Javascript 相关文章推荐
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
jQuery中height()方法用法实例
Dec 24 #Javascript
jQuery中width()方法用法实例
Dec 24 #Javascript
jQuery中animate()方法用法实例
Dec 24 #Javascript
jQuery中fadeOut()方法用法实例
Dec 24 #Javascript
创建js对象和js类的方法汇总
Dec 24 #Javascript
javascript使用prototype完成单继承
Dec 24 #Javascript
jQuery中slideUp()方法用法分析
Dec 24 #Javascript
You might like
php学习之流程控制实现代码
2011/06/09 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
解决vue addRoutes不生效问题
2020/08/04 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python读取图片任意范围区域
2019/01/23 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python中if及if-else如何使用
2020/06/02 Python
python打开音乐文件的实例方法
2020/07/21 Python
值传递还是引用传递
2015/02/08 面试题
财务管理职业生涯规划书
2014/02/26 职场文书
学生退学证明
2015/06/23 职场文书