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 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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
destoon之一键登录设置
2014/06/21 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python语言使用技巧分享
2016/05/31 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python装饰器使用实例详解
2019/12/14 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
某科技软件测试面试题
2013/05/19 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
公务员保密承诺书
2014/03/27 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
给朋友的道歉短信
2015/05/12 职场文书
跑吧孩子观后感
2015/06/10 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android