js实现多物体运动框架并兼容各浏览器

来源：互联网发布：知乎联合创始人张亮编辑：程序博客网时间：2024/05/22 10:43

首先，我们需要知道在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.onload=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.onmouseover=function(){startMove(this,'height',400);}oDiv1.onmouseout=function(){startMove(this,'height',100);}oDiv2.onmouseover=function(){startMove(this,'width',400);}oDiv2.onmouseout=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。

2 0