解决JS动画中border导致的div宽度计算偏差

border属性对宽度计算的影响

下面通过一个具体示例来演示该问题。

 
<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设置的是元素的内容宽度，而ok.offsetWidth获取的是包含边框在内的实际渲染宽度。因此，当执行减法操作时，右侧计算出的值比左侧设定的值多出了边框的宽度（此处为2像素，左右各1像素），导致视觉上宽度反而增加。解决此问题的一个简单方法是每次减去3个像素，从而抵消边框影响，实现实际宽度减少1像素的效果。另一种方法是将右侧也改为解析样式宽度，但需要相应调整div的定义方式，如下所示：

 
<div id="ok" style="width:200px:></div>

更完善的解决方案是使用currentStyle或getComputedStyle来获取准确的计算后样式属性。