做了个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. kvm 性能调优

    CPU Tuning Cache share tuning 对于物理 CPU,同一个 core 的 threads 共享 L2 Cache,同一个 socket 的 cores 共享 L3 cache ...

  2. 基于粒子群算法求解求解TSP问题（JAVA）

    一.TSP问题 TSP问题(Travelling Salesman Problem)即旅行商问题,又译为旅行推销员问题.货郎担问题,是数学领域中著名问题之一.假设有一个旅行商人要拜访n个城市,他必须选 ...

  3. Java NIO使用及原理分析 (四)

    在上一篇文章中介绍了关于缓冲区的一些细节内容,现在终于可以进入NIO中最有意思的部分非阻塞I/O.通常在进行同步I/O操作时,如果读取数据,代码会阻塞直至有 可供读取的数据.同样,写入调用将会阻塞直至 ...

  4. NPOI组件集锦

    关于NPOI不错的介绍:http://www.cnblogs.com/restran/p/3889479.html http://www.cnblogs.com/Irving/archive/2012 ...

  5. POJ 3614 Sunscreen 优先队列 贪心

    题意 有C个奶牛去晒太阳 (1 <=C <= 2500),每个奶牛各自能够忍受的阳光强度有一个最小值和一个最大值,太大就晒伤了,太小奶牛没感觉. 而刚开始的阳光的强度非常大,奶牛都承受不住 ...

  6. [Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin

    Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsCh ...

  7. android 69 SQLite数据库

    package com.itheima.sqlitedatabase; import java.sql.ResultSet; import android.content.Context; impor ...

  8. MySQL 5.6 SQL 优化及 5.6手册

    http://blog.chinaunix.net/uid-259788-id-4146363.html http://www.cnblogs.com/Amaranthus/p/4028687.htm ...

  9. InnoDB MyISAM区别及优化（摘录）

    InnoDB 是 MySQL 上第一个提供外键约束的引擎,除了提供事务处理外,InnoDB 还支持行锁,提供和 Oracle 一样的一致性的不加锁读取,能增加并发读的用户数量并提高性能,不会增加锁的数 ...

  10. VS2015+TFS2015源代码管理

    使用Visual Studio连接TFS