<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{position:absolute;width:100px;height:100px;background:#ccc;left:0px;border:1px red solid;}
#txt{position:absolute;left:500px;}
</style>
<script>
window.onload=function(){
oDiv=document.getElementById("div1");
oDiv.onmouseover=function()
{
Move(200);
}
oDiv.onmouseout=function()
{
Move(100);
}
}
function Move(itarget)
{
oDiv=document.getElementById("div1");
setInterval(function()
{
oDiv.style.width=oDiv.offsetWidth-1+"px";
//加上border时 width不减反加 offsetWidth 计算的是盒模型尺寸 包括margin padding border width
//border 为1时 offsetWidth 为102
oTxt.value=offsetWidth;
},30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
其实遇到这个bug很正常，js中offset...计算的是盒模型尺寸，即包括margin padding border width。比如，border 为1时，offsetWidth的实际值为102，
oDiv.offsetWidth-1
102-1
101+2-1
102+2-1
...
...
以此类推，所以运动是不减反增。
关于写运动时，这个bug的解决办法是使用 obj.currentStyle[attr]和getComputedStyle(obj,...)[attr],详细代码整理如下。
getStyle（getComputedStyle currentstyle） 获取非行间样式函数封装
