下面我們來看一個例程
複製代碼代碼如下:
<script type="text/javascript">
var timer
function stopMove(){
clearInterval(timer)
}
function startMove(){
var div=document.getElementById('ok')
clearInterval(timer)
timer=setInterval(function(){
ok.style.width=ok.offsetWidth-1+'px' ;//理論上應該是寬度不斷減少，但是實際卻增長，原因在樣式表中的border屬性，去掉即可解決
},20)
}
</script>
<style type="text/css">
* {margin: 0;padding:0}
body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;}
#ok{width:800px;height: 200px;background-color:darkgreen;border: 1px red solid; }
</style>
</head>
<body>
<div id="ok"></div>
注意看註釋，為什麼會出現這個現象呢？其實就是因為border所造成的，由於ok.style.width指定的是div的寬度，而offsetwidth指的是實際的寬度，包括border寬度。所以這個右邊的式子得到的寬度值其實比左邊大一個像素，解決方法，每次減去3個像素就可以達到實際減去一個像素的目的。或用右邊也用parseInt(div.style.width),但要修改div如下：
複製代碼代碼如下:
<div id="ok" style="width:200px:></div>
終極方案：用currentstyle或getcomputedstyle來取得屬性。