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 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
JavaScript原生数组函数实例汇总
Oct 14 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源代码
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP7 其他修改
2021/03/09 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
python字符串排序方法
2014/08/29 Python
python里大整数相乘相关技巧指南
2014/09/12 Python
python web框架学习笔记
2016/05/03 Python
python实现接口并发测试脚本
2019/06/25 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
python 写一个文件分发小程序
2020/12/05 Python
员工薪酬福利制度
2014/01/17 职场文书
人事专员工作职责
2014/02/22 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
教育见习报告范文
2014/11/03 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android