zoukankan      html  css  js  c++  java
  • 有效解决js中添加border后动画bug问题

    做了个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>
  • 相关阅读:
    算法图解
    Cairo graphics tutorial
    远程对象调用
    异步和多线程的关系
    jQuery调用api
    GTK# tutorial
    DLT
    protobuf入门笔记
    PDO讲解
    数据库练习——分页查询
  • 原文地址:https://www.cnblogs.com/Arther-J/p/5400971.html
Copyright © 2011-2022 走看看