js を使用して、border 属性_javascript スキルによって引き起こされる div 幅の問題を解決する

ルーチンを見てみましょう。

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

< script type= "text/javascript">
var timer
function stopMove(){
clearInterval(timer)
}
function startMove(){
var div=document. getElementById(' ok')
clearInterval(timer)
timer=setInterval(function(){
ok.style.width=ok.offsetWidth-1 'px' ;//理論的には、幅は次のようになります。継続的に減少していますが、実際の増加はスタイル シートの border 属性によるもので、これを削除することで解決できます。
},20)
}
type="text/css"> ;
* {margin: 0;padding:0}
body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;}
#ok{幅:800ピクセル;高さ:200ピクセル;背景色:ダークグリーン;境界線:1ピクセル
>

この現象はなぜ起こるのでしょうか?実際、ok.style.width は div の幅を指定し、offsetwidth は境界線の幅を含む実際の幅を参照するため、境界線が原因で発生します。したがって、右側の式で得られる幅の値は、実際には左側の式よりも 1 ピクセル大きくなります。実際に 1 ピクセルを減算するという目的を達成するには、毎回 3 ピクセルを減算する必要があります。または、右側で parseInt(div.style.width) を使用しますが、div を次のように変更します:

コードをコピーします

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

究極の解決策: currentstyle を使用します。または getcomputedstyle を使用して属性を取得します。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。