以下のルーチンを見てみましょう
次のようにコードをコピーします。
<script type="text/javascript">
var タイマー
関数 stopMove(){
クリアインターバル(タイマー)
}
関数 startMove(){
var div=document.getElementById('ok')
クリアインターバル(タイマー)
timer=setInterval(function(){
ok.style.width=ok.offsetWidth-1+'px' ;//理論的には幅は減少するはずですが、実際には増加しているのが原因で、これを削除することで解決できます。 。
},20)
}
</script>
<style type="text/css">
* {マージン: 0;パディング:0}
本文 {フォントサイズ: 14px;行の高さ: 24px;マージン: 0px;パディング: 0px;}
#ok{幅: 800 ピクセル;高さ: 200 ピクセル;背景色: ダークグリーン;境界線: 1 ピクセルの赤の実線 }
</スタイル>
</head>
<本文>
<div id="ok"></div>
コメントに注目してください。なぜこの現象が発生するのでしょうか?実際、ok.style.width は div の幅を指定し、offsetwidth は境界線の幅を含む実際の幅を参照するため、境界線が原因で発生します。したがって、右側の式で得られる幅の値は、実際には左側の式よりも 1 ピクセル大きくなります。実際に 1 ピクセルを減算するという目的を達成するには、毎回 3 ピクセルを減算する必要があります。または、右側で parseInt(div.style.width) を使用しますが、div を次のように変更します。
次のようにコードをコピーします。
<div id="ok" style="width:200px:></div>
究極の解決策: currentstyle または getcomputedstyle を使用してプロパティを取得します。