JavaScript中width和offsetWidth的区别（动画中）

mc67 2021-08-09 原文

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) 
     }