まず、このバグがどのように発生するかを見てみましょう。
コードコピーは次のとおりです。
<style type = "text/css">
＃div1 {
幅：200px;
高さ：200px;
背景：赤;
}
</style>
コードコピーは次のとおりです。
<body>
<div id = "div1">
</div>
</body>
以下は、divを徐々に狭くする目的で、テストに使用されるJavaScriptコードです。
コードコピーは次のとおりです。
<script type = "text/javascript">
setInterval（function（）{
var odiv = document.getElementById（ "div1"）;
odiv.style.width = odiv.offsetwidth-1+'px';
}、30）;
</script>
JavaScriptコードは非常に簡単で、実行するのに問題はありません。また、必要なDIVは徐々に小さくなっています。
では、このオフセットバグはどのようにして生まれたのでしょうか？
今、私たちがスタイルを動かすと、魔法のようなことが起こります。 。 。
div1：1px solid #ccccffにスタイルの境界線を追加します。
コードコピーは次のとおりです。
<style type = "text/css">
＃div1 {
幅：200px;
高さ：200px;
背景：赤;
国境：1pxソリッド#ccccff;
}
</style>
この時点で、コードを実行すると、DIVが徐々に右に増加していることがわかりました。 。 。画像バグが表示されました。 。 。 。それは明らかにマイナス1です、なぜこれが起こるのですか？
オフセットの特性について考えてみましょう。
例：Div幅：200px国境1px。実際、彼が取得するオフセット幅は202pxです。
それでは、動きが最初に始まったとき、divの幅は実際には200pxで、オフセット幅は202でした。
この時点で、odiv.style.width = odiv.offsetwidth-1+'px';この文はodiv.style.width = 202-1 = 201pxに等しくなります。次に、値を幅に割り当てます
この文が再び実行されると、divの幅は201pxです。この場合、毎回1pxが追加され、徐々に大きくなります。これはオフセットのバグです。
この問題を解決する方法は？
実際、このオフセット幅は必要ありません。幅を使用します！ ！ CSSスタイルで幅を直接取得する関数を書く
行の合間にないスタイルを取得します：
コードコピーは次のとおりです。
関数getStyle（obj、name）{
if（obj.currentstyle）{
obj.currentStyle [name]を返します。
} それ以外 {
return getComputedStyle（obj、null）[name];
}
}
次に、元のコードを変更します。
コードコピーは次のとおりです。
<script type = "text/javascript">
setInterval（function（）{
var odiv = document.getElementById（ "div1"）;
odiv.style.width = parseint（getStyle（odiv、 'width'））-1+'px';
}、30）;
関数getStyle（obj、name）{
if（obj.currentstyle）{
obj.currentStyle [name]を返します。
} それ以外 {
return getComputedStyle（obj、null）[name];
}
}
</script>
このようにして、プログラムの実行に問題はありません。