带边框的简单变宽运动出现的问题

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       #div{
           width: 200px;
           height: 200px;
           background:#f00;
           border:10px solid blue;
       }
   </style>
   <script>
       window.onload=function(){
           startMove();
       }
       function startMove(){
           setInterval(function(){
               var div = document.getElementById('div');
           div.style.width=parseInt(getStyle(div,'width'))-2+'px';
       },30)
       }
       function getStyle(obj,attr){
           if(obj.currentStyle){
               return obj.currentStyle[attr];
           }else{
               return getComputedStyle(obj,false)[attr];
           }
       }
   </script>
</head>
<body>
   <div id="div"></div>
</body>
</html>

总结：
   obj.style.width：只能获取行内样式的属性，得不到css内联样式和外部链接样式的属性；
   obj.setoffWidth：获得div的宽度（包括边框的宽度），若用setoffWidth，会获得元素+边框的宽度,可能出现动画错乱(相反方向或者不动)；
   parseInt()：解析一个字符串并返回一个整数，且只会提取字符串字母值钱的数字。例:parseInt('10px11') 返回10
   currentStyle：获取内联样式和外部链接的属性，只兼容ie
   getComputedStyle：获取内联样式和外部链接的属性，兼容火狐谷歌
   以上两个方法只能获取属性，不能设置属性

带边框的简单变宽运动出现的问题

猜你喜欢