JavascriptスポーツにおけるOffsetのbugソリューション

まずこのバグはどのように発生したのか見てみます.

以下はテスト用のJavascriptコードです.目的はdivを徐々に狭くすることです.

 
  
  
  <br>             setInterval(function(){ 
  <br>                 var oDiv=document.getElementById("div1"); 
  <br>                 
  <br>                 oDiv.style.width=oDiv.offsetWidth-1+'px'; 
  <br>                 
  <br>             },30); 
  <br>          
  
 
 

Javascriptコードはとても簡単です.運行しても大丈夫です.思い通りのdivはだんだん小さくなります.
このオフセットのバグはどうやって来ましたか?
次に私たちがスタイルを動かすと不思議なことが起こります.
私たちはdiv 1にスタイルborderを追加します.

この時コードを実行していますが、divは右に向かって徐々に増大しています.image BUG惊现.......マイナス1なのに、なぜこんなことが起きたのですか?
オフセットの特徴を考えてみましょう.
例:div width:200 px  border 1 px  . 彼が実際に得たoffset Widthは202 pxです.
では、運動が始まったばかりの頃は、実際にdivの幅は200 pxだったと言います.  では、offset Widthは202です.
この時oDiv.style.width=oDiv.offset Width-1+'px'この言葉はoDiv.style.width=202-1=201 pxに等しい.そしてwidthに値を付けます.
この言葉を再実行するとdivの幅は201 pxです.そうすると毎回1 pxが増えて、だんだん大きくなります.これはoffsetのbugです.
この問題はどう解決しますか?
実はこのoffset Widthを使わなくてもいいです.私たちはwidthを使います.関数を書いて直接cssスタイルのwidthを取得すればいいです.
行間にないスタイルを取得:

 
  
 function getStyle(obj, name) { 
  
                 if (obj.currentStyle) { 
  
                     return obj.currentStyle[name]; 
  
                 } else { 
  
                     return getComputedStyle(obj, null)[name]; 
  
                 } 
  
             } 
  
 
 

じゃ、私達はもとのコードを修正します.

 
  
  
  <br>             setInterval(function(){ 
  <br>                 var oDiv=document.getElementById("div1"); 
  <br>                 oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px'; 
  <br>             },30); 
  <br>             function getStyle(obj, name) { 
  <br>                 if (obj.currentStyle) { 
  <br>                     return obj.currentStyle[name]; 
  <br>                 } else { 
  <br>                     return getComputedStyle(obj, null)[name]; 
  <br>                 } 
  <br>             } 
  <br>          
  
 
 

 
このようにプログラムを実行すれば、何の問題もありません.