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中使用Callback控制流程介绍
Mar 16 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
javascript实现点亮灯泡特效示例
Oct 15 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
python追加元素到列表的方法
2015/07/28 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
监察建议书
2015/02/04 职场文书
班主任工作总结范文
2015/08/13 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android