JavaScript中width和offsetWidth的区别(动画中)
JavaScript中width和offsetWidth的区别(动画中)
我们先看这连个参数本身的区别,
width:物体自身的宽度;
offsetWidth:物体盒子模型的宽度,包括border pading
HTML:
<input type="button" value="show" onclick="show()" /> <div id="move"></div>
CSS:
#move{ height:100px; width:100px; background:green; border:1px solid black; }
javaScript:(在注意区分,物体的运动和物体自身的变化(比如,长度,宽度 border 等等))
//兼容性的获取 行间样式和 嵌套样式 function getStyle(obj,name){ if(obj.currentStyle!=undefined){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function show(){ var obj=document.getElementById("move"); alert(getStyle(obj,'width')); //100px 物体单纯的宽度 alert(obj.offsetWidth); //102px 自身宽度+border,如果有pading的话,还要加上pading }
根据上面的特性;
当我们在做物体的运动的时候,如果采用offsetWidth;结果....
window.onload=function (){ var obj=document.getElementById("move"); setInterval(function (){ //本意:让obj每个30 width减去1 obj.style.width=obj.offsetWidth-1+'px'; //然后实际上是; //102-1 =101 //101+border(2)-1 //所以变成了加一 //如果减去的数恰好等于border 2 则原地不动 //如果减去的数为3 才等于我们的本意; },30) }
总结,当我们在让物体的宽度变化的时候,只能取实际的值width,不能包含border pading 等因素
如果使用的是offsetWidth 物体就不好设置border 和 pading,如果设置了,就要使用width了;
同样,之前我们在物体运动的时候取的是offsetLeft,如果我们取其他参数呢? 又会出问题;
那就涉及到定位 参照物的问题了?