首先，我們需要知道在js中獲取對象的寬度如offsetWidth等，可能會存在一些小小的bug。原因之一在於offsetWidth僅僅只是獲取盒子模型中內容的部分寬度，並不包含內邊距，邊框和外邊距，這樣會導致控制對象運動與預期不符，這裏就不詳細的去解釋。
而爲了解決這個問題，在這裏，我們提供了一個方法來保證我們的運動的準確性。
style只能獲取元素的內聯樣式，內部樣式和外部樣式使用style是獲取不到的。
currentStyle可以彌補style的不足，但是隻適用於IE。
getComputedStyle同currentStyle作用相同，但是適用於FF、opera、safari、chrome。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#div1,#div2{width: 200px;height: 100px;background: #800808;margin-bottom: 2em;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementsByTagName('div');
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
for(var i=0;i<oDiv.length;i++)
{
oDiv[i].timer=null;
oDiv1.οnmοuseοver=function(){
startMove(this,'height',400);
}
oDiv1.οnmοuseοut=function(){
startMove(this,'height',100);
}
oDiv2.οnmοuseοver=function(){
startMove(this,'width',400);
}
oDiv2.οnmοuseοut=function(){
startMove(this,'width',200);
}
}
}
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,null)[attr];
}
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=parseInt(getStyle(obj,attr));
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur=='iTarget')
{
clearInterval(obj.timer);
}
else{
obj.style[attr]=cur+speed+"px";
}
},30);
}
</script>
</head>
<div id="div1"></div>
<div id="div2"></div>
</html>在這裏注意：
currentStyle和getComputedStyle只能用於獲取頁面元素的樣式，不能用來設置相關值。
如果要設置相應值，應使用style。
