JS--变速动画函数封装增加任意多个属性

<style>
*{
	padding: 0;
	margin: 0;
}
div{
	width: 200px;
	height: 100px;
	background-color: green;
	position: absolute;
}
</style>

<input type="button" value="改变样式" id="btn" />
<div id="dv"></div>
<script>
function my$(id){
	return document.getElementById(id);
}

my$("btn").onclick = function(){
	var json = {
		"width": 800,
		"height": 300,
		"left": 600,
		"top": 500
	};
	animation(my$("dv"),json);
	console.log(json["width"]);
}

//获取任意元素的任意多个属性函数
function getStyles(element, attr){
	return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr] || 0;
}
//变速动画函数
function animation(element,json){
	clearInterval(element.timeId);
	element.timeId = setInterval(function(){
		var flag = true;//默认,假设全部到达目标位置
		for(var key in json){
			//元素当前位置
			var current =parseInt(getStyles(element,key));
			//目标值
			var target = json[key];
			//每次移动的距离
			var step = (target - current)/10;
			step = step > 0 ? Math.ceil(step) : Math.floor(step);
			current += step;
			element.style[key] = current + "px";
			// console.log(key+"===="+current);
			
			//只要当前位置不等于目标位置,flag就等于false
			if(current != target){
				flag = false;
			}
		}
		//判断有没有到达目标位置
		if(flag){
			clearInterval(element.timeId);
		}
		
		// console.log("目标："+target+"，当前："+current+"，每次移动的步数"+step);
	},20);
}
</script>