                        課程
                    
                        /前端開發
                        
                            /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>