做了个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. Dynamic Library Design Guidelines

    https://developer.apple.com/library/mac/documentation/DeveloperTools/Conceptual/DynamicLibraries/100 ...

  2. Preferred Java way to ping a HTTP Url for availability

    I need a monitor class that regularly checks whether a given HTTP URL is available. I can take care ...

  3. 利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果

    效果如图鼠标滑动导航  下边显示不同效果 html代码和css格式代码 <body><div id="tab" class="tab"> ...

  4. NIO组件Selector工作机制详解（下）

    转自:http://blog.csdn.net/haoel/article/details/2224069 五.  迷惑不解 : 为什么要自己消耗资源? 令人不解的是为什么我们的Java的New I/ ...

  5. get改造成post请求

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  6. 80端口被system占用的问题

    80端口被system占用的问题今天启动Apache的时候发现无法启动-80端口被占用. 检查进程发现是system进程id=4给占用了.这个是系统进程 检查服务,看看IIS.没发现问题. 检查了半天 ...

  7. FastDFS 的部署、配置与测试的

    部署篇:http://soartju.iteye.com/blog/803477 配置篇:http://soartju.iteye.com/blog/803524 测试篇:http://soartju ...

  8. 以色列学生---debugger 构建

    http://eli.thegreenplace.net/2011/01/23/how-debuggers-work-part-1 http://eli.thegreenplace.net/

  9. java定义类 对象，引用，指针

    java是根据面向对象编程,因此有类和对象的概念,类分为普通类与抽象类. 一.定义类 类由N个 构造器  成员变量  方法组成,可以不定义,也可以根据语法定义N个. [修饰符] class 类名{ 构 ...

  10. android UI生成器

    可根据选择的效果生成资源 http://jgilfelt.github.io/android-actionbarstylegenerator/#name=example&compat=sher ...