做了个demo发现如果一个div不加border属性，用对象的offsetWidth属性来控制width没问题，但是如果一旦加了border属性，问题就来了。

其实offsetWidth属性获取的的是div内容宽度加内外边距和边框的宽度总和，所以为了更好地解决这个bug，自己弄了一个getStyle方法来有效的解决这个bug。以下是代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<style type="text/css">

    div{width: 200px;height: 200px;background: red;border: 2px solid blue;}

</style>

<script type="text/javascript">

    window.onload = function() {

        var oDiv = document.getElementsByTagName("div")[0];

        startMove();

        function startMove() {

        setInterval(function() {

            oDiv.style.width = parseInt(getStyle(oDiv,"width"))-1+"px";

            },30);

        }

        function getStyle(obj,attr) {

            if (obj.currentStyle){

                return obj.currentStyle[attr];

            }else{

                return getComputedStyle(obj,false)[attr];

            }

        }

}

</script>

<body>

    <div></div>

</body>

</html>

有效解决js中添加border后动画bug问题的更多相关文章

  1. promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

    * promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的 ...

  2. 使用call、apply和bind解决js中烦人的this，事件绑定时的this和传参问题

    1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...

  3. bootstrap table 生成的表格里动态添加HTML元素按钮，JS中添加点击事件，点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

  4. js浮点数精度丢失问题及如何解决js中浮点数计算不精准

    js中进行数字计算时候,会出现精度误差的问题.先来看一个实例: console.log(0.1+0.2===0.3);//false console.log(0.1+0.1===0.2);//true ...

  5. 关于three.js中添加文字的方式[转]

    https://blog.csdn.net/qq563969790/article/details/76584976 网上资料大部分是通过引入外部font库进行文字效果的载入,但是在实际运行的时候发现 ...

  6. [原][osgEarth]在osgearth中添加相机路径动画

    在osg中添加相机动画路径请参考:http://www.cnblogs.com/lyggqm/p/8075277.html 这里的代码是在osgearth中添加相机动画路径漫游器: #include ...

  7. js中全局变量修改后的值不生效【jsp页面中各个js中内容的加载顺序】

    一个老项目中,一个jsp文件中有很多个js文件, 现在要在页面上的一个地方判断一个状态,因为一直找不到原来是在哪里修改的那个状态,所以决定不找了,而是在比较靠前引入的一个js中定义一个全局变量,然后在 ...

  8. 一道面试题关于js中添加动态属性

    js中数据类型包含基本数据类型和引用类型,基本类型包括:string.null.undefined.number.boolean.引用类型即是对象比如:array  .function以及自定义对象等 ...

  9. MFC解决View中添加控件闪烁

    一.简介 我们经常会在我们的View类中添加各种类型的控件,列表控件就是最常用的了.但是我们发现添加控件的时候会,在窗口变化的时候会导致各种各样的闪烁,让我们烦恼异常.所以我对此找到新的解决方案. 二 ...

随机推荐

  1. Device Tree常用方法解析

    Device Tree常用方法解析 Device Tree在Linux内核驱动中的使用源于2011年3月17日Linus Torvalds在ARM Linux邮件列表中的一封邮件,他宣称“this w ...

  2. JQ绑定事件（1.9已经废除了live()等绑定事件方法，on()方法是官方推荐的绑定事件的一个方法）

    本文来源:http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(ev ...

  3. 打开U盘里是U盘的快捷方式？（2013.12.05）

    昨天去打印室打印,结果U盘就中招了 症状:   我的U盘:                                                            打开变成了里面:   ...

  4. 3 视频里weekend05、06、07的可靠性 + HA原理、分析、机制 + weekend01、02、03、04、05、06、07的分布式集群搭建

    现在,我们来验证分析下,zookeeper集群的可靠性 现在有weekend05.06.07 将其一个关掉, 分析,这3个zookeeper集群里,杀死了weekend06,还存活weekend05. ...

  5. Intellij 中的git操作 转！

    http://blog.csdn.net/lovesummerforever/article/details/50032937 Git原理以后会分章节介绍,本次主要说一下intellij怎样操作git ...

  6. Yii2 自定义Gii生成代码模板

    我们使用一个例子来介绍如何定制代码模板.假设我们想要定制由 model 生成器生成的代码. 我们首先创建一个名为 protected/gii/model/templates/customer 的目录. ...

  7. Hibernate学习之get和load区别

    结论: insert():插入记录并将同步更新到session缓存. update():更新记录并同步更新到session缓存. delete():删除记录并同步更新session缓存. get(): ...

  8. iOS中二维码的生成与使用（入门篇）

    这里简单总结一下关于二维码的扫描与生成,用的是原生的AVFoundation框架,其实这个框架目前功能还是够用的,不过这里推荐一个二维码扫描的第三方(face++),网址就不贴了,直接度娘就OK,里面 ...

  9. java接口相关例题

    java接口相关习题 interface Graphics{  //接口里面只能用抽象方法  public abstract double area();    }//设置 平面类class Plan ...

  10. SpringMVC接收页面表单参数(转)

    作者:CN.programmer.Luxh 和java相关 一个普通的表单. 表单的代码如下: <%@ page language="java" contentType=&q ...