做了个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. make it clear how to use const in C++

    1.first of all,take a lookup on the left side of keyword const.If there is something(type or pointer ...

  2. 解决IE6浏览器下position:fixed固定定位问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

  3. RGB同步信号 DCLK／HS／VS／DE信号介绍

    来源:  http://www.cnblogs.com/general001/articles/3721683.html 只要是数字信号处理电路,就必须有时钟信号.在液晶面板中,像素时钟是一个非常重要 ...

  4. 实时的.NET程序错误监控产品Exceptionless开源了

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:实时的.NET程序错误监控产品Exceptionless开源了.

  5. 【转】Android异常：that was originally added here

    ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 02-19 15:08:02.228: E/WindowManager(22172): Activity  ...

  6. 如何将angularJs项目与requireJs集成

    关于angularjs.requirejs的基础知识请自行学习 一.简单事例的项目目录如下: -index.html -scripts文件夹 --controller文件夹 --- mianContr ...

  7. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  8. android自定义TabWidget

    在做项目的时候,需要用到这个选项卡,刚开始看了系统的tabwidget,囧了,底边有黑线不说,还不美观,扒了好多的网页发现前辈做的能够满足自己的需求,将代码修改了下,就能用喽,伟人说过,站在前辈的肩膀 ...

  9. LabVIEW设计模式系列——移位寄存器

    标准:1.太多移位寄存器会导致连线太多,看起来凌乱,使用簇将变量打包,统一用一个移位寄存器,这样可以减少连线的麻烦2.如果每个变量都使用一个移位寄存器,没有一个名字是很难区分移位寄存器到底属于哪一个变 ...

  10. qt中如果用qDebug输出彩色调试信息

    Linux:  在终端输出彩色信息有点类似于html的语法,即在要输出的文字前加上转义字符. 指令格式如下\033[*m 这里的*就是转义字符,例如我们要输出一段绿色的文字 qDebug(" ...