使用JS 遍历 json时遇到的问题。attr.step为什么是undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
 function getStyle(obj,attr){
     if (obj.currentStyle){
         return obj.currentStyle[attr];
     }else{
        return window.getComputedStyle(obj,null)[attr];
     }
 }


 function  animate_arg(obj,json,speed){
     for(var attr in json){
   var current = parseInt(getStyle(obj,attr));
   console.log(attr);
     console.log(typeof(attr));
     //比如此处传josn{top:500}进来的时候console.log(attr)就是输出top，那下面attr.step json的值传进来就会生成相应的
     //width.step,height.step,left.step 但是我实际我attr.step得到的是个未定义的。
     attr.step = json[attr]>current ? speed : -speed;
     console.log(typeof(attr.step));
     
     attr.timer = setInterval(function(){
   var current = parseInt(getStyle(obj,attr));
     var result = Math.abs(json[attr] - current);
         if (result <= speed){
         obj.style[attr]=json[attr];
         }else{
         obj.style[attr]= current + attr.step + "px";
         }
    },30)
   }
  }


   window.onload=function(){
     var btn200 = document.getElementById("btn200");
     var btn400 = document.getElementById("btn400");
     var box = document.getElementById("box");
     btn200.onclick = function() {
         animate_arg(box,{width: 200, top: 800,left: 200},10);
     };
     btn400.onclick = function() {
        animate_arg(box,{top:500},10);
      }
   }


    </script>
    <style>
         div {
             width: 100px;
             height: 100px;
             background-color: pink;
             position: absolute;
             left: 0;
             top: 50px;
             border-radius: 50%;
         }
    </style>
</head>
<body>
    <button id="btn200">200</button>
    <button id="btn400">400</button>
    <div id="box"></div>
</body>
</html>
地狱快车_666
浏览 1372回答 2