motion_javascript スキルにおける Javascript Offset のバグ解決策

まず、このバグがどのように発生するかを見てみましょう。

コードをコピーします コードは次のとおりです: #div1 { 幅: 200px; 高さ：200px; 背景: 赤; }

コードをコピーします コードは次のとおりです:

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

コードをコピーします

コードは次のとおりです: setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=oDiv.offsetWidth-1 'px'; },30);

JavaScript コードは非常に単純です。実行すると、目的の div が徐々に小さくなります。

では、このオフセットのバグはどこから来たのでしょうか?

それではスタイルを動かしてみましょう。魔法のようなことが起こります。 。 。 div1 にスタイル境界線を追加します: 1px 実線 #CCCCFF;

コードをコピーします

コードは次のとおりです:

#div1 { 幅: 200px; 高さ：200px; 背景: 赤; 境界線: 1 ピクセルの実線 #CCCCFF; } この時点でコードを実行すると、div が右に向かってゆっくりと増加していることがわかります。 。 。突然現れた画像バグ。 。 。 。 明らかにマイナス1ですが、なぜこのようなことが起こるのでしょうか？

オフセットの特性について考えてみましょう:

例: div 幅: 200px 境界線 1px。 実際、彼が取得した offsetWidth は 202px です。

それでは、動きを開始したばかりのとき、div の幅は実際には 200px だったので、offsetWidth は 202 でした。

この時点では、oDiv.style.width=oDiv.offsetWidth-1 'px'; この文は oDiv.style.width=202-1=201px に等しく、それを width に割り当てます。

この文を再度実行すると、div の幅は 201px ですが、毎回 1px ずつ増加しますが、徐々に大きくなります。 これがオフセットのバグです。

この問題を解決するにはどうすればよいですか?

実際には、この offsetWidth は必要ありません。 幅を使用します! ！ CSSスタイルで幅を直接取得する関数を記述します

行間にないスタイルを取得します:

コードをコピーします コードは次のとおりです: function getStyle(obj, name) { If (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } }

次に、元のコードを変更しましょう:

コードをコピーします コードは次のとおりです: setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1 'px'; },30); function getStyle(obj, name) { If (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } }

このようにして、プログラムは問題なく実行されます。