                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

为什么使用getStyle（）方法，但是变换后的数值还是不对？

如下代码，鼠标移上去改变后的宽为 391px，于设定参数不符，鼠标移出正常是200px，请问哪里出错了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体运动--动画</title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

li {
 width: 200px;
 height: 80px;
 margin-bottom: 20px;
 background-color: #FF0000;
 border: 4px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function (){
 var oli = document.getElementsByTagName("li");
 for (var i=0; i<oli.length; i++) {
   oli[i].timer = null;    //多物体运动不能共享一些参数，需提前单独设置为属性
 	oli[i].onmouseover = function (){
 	 changeW(this,"width",400);
 	}
 	oli[i].onmouseout = function (){
 	 changeW(this,"width",200);
 	}
 }
}

//getStyle() 封装
function getStyle(obj,attr){
 if (obj.currentStyle) {
 	return obj.currentStyle[attr];
 } else{
 	return getComputedStyle(obj,false)[attr];
 }
        
}

//运动函数
function changeW(obj,attr,W) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
 var iattr = parseInt(getStyle(obj,attr));
 var speed = (W-iattr)/10;
 speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
 if (iattr == W) {
 	clearInterval(obj.timer);
 } else{
 	obj.style[attr] = iattr + speed + "px";
 }
},30)
}

</script>
</head>
<body>
 <ul>
 	<li></li>
 	<li></li>
 	<li></li>
 </ul>
</body>
</html>