做了个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. JAVA Web项目的编码过滤器

    首先写一个EncodeFilter的过滤类: package com.djtu.wy.common; import java.io.IOException;import javax.servlet.F ...

  2. 知道创宇爬虫题--代码持续更新中 - littlethunder的专栏 - 博客频道 - CSDN.NET

    知道创宇爬虫题--代码持续更新中 - littlethunder的专栏 - 博客频道 - CSDN.NET undefined 公司介绍 - 数人科技 undefined

  3. 天涯html&css基础框架

    html申明 对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位. ...

  4. Visual Studio 2015安装过程卡住，解决办法

    Visual Studio 2015安装过程中卡住的情况有很多,我遇到的是卡在安装windows 更新KB2999226,解决办法 手动安装此更新包,位置在Visual Studio的安装包中,目录: ...

  5. DevExpress 用户控件 分页（下）

    分页控件调用 (1)初始化时: this.pageCtrl1.pageSize = 4; (2)数据绑定时: 从数据库中获取实时的 Public void LoadData(){ //这是只写有关分页 ...

  6. C#写的笔记管理软件

    在VS2008中做的 附件:http://ys-e.ys168.com/2.0/276581430/j4G4J63367LMMJUJjsgW/CSHARP_WinCtrl21t_2014%E5%B9% ...

  7. POJ 1006 Biorhythms(中国剩余定理）

    题目地址:POJ 1006 学习了下中国剩余定理.參考的该博客.博客戳这里. 中国剩余定理的求解方法: 假如说x%c1=m1,x%c2=m2,x%c3=m3.那么能够设三个数R1,R2,R3.R1为c ...

  8. Oracle怎么更改用户名

    http://blog.csdn.net/weiwenhp/article/details/8094575 目录(?)[-] 改用户名的用处 怎么改用户名 还要做的工作 想干坏事明文显示密码   很多 ...

  9. PYTHON queue

    http://blog.csdn.net/bravezhe/article/details/8588437

  10. Form 对象的集合

    <html> <body id="myBody" class="myBody"> <form id="myForm&qu ...