Mari kita lihat rutinitas di bawah ini
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
pengatur waktu var
fungsi stopMove(){
interval jelas (pengatur waktu)
}
fungsi startMove(){
var div=dokumen.getElementById('ok')
interval jelas (pengatur waktu)
pengatur waktu=setInterval(fungsi(){
ok.style.width=ok.offsetWidth-1+'px' ;//Secara teoritis lebarnya seharusnya dikurangi, namun kenyataannya malah bertambah. Alasannya adalah atribut border di style sheet, yang bisa diatasi dengan menghapusnya .
},20)
}
</skrip>
<gaya tipe="teks/css">
* {margin: 0;padding:0}
isi {ukuran font: 14px;tinggi garis: 24px;margin: 0px;padding: 0px;}
#ok{lebar:800px;tinggi: 200px;warna latar:hijau tua;batas: 1px merah solid; }
</gaya>
</kepala>
<tubuh>
<div id="ok"></div>
Perhatikan komentarnya, mengapa fenomena ini bisa terjadi? Faktanya, hal ini disebabkan oleh border, karena ok.style.width menentukan lebar div, dan offsetwidth mengacu pada lebar sebenarnya, termasuk lebar border. Oleh karena itu, nilai lebar yang diperoleh dari rumus di sebelah kanan sebenarnya satu piksel lebih besar dari yang di sebelah kiri. Solusinya adalah dengan mengurangi 3 piksel setiap kali untuk mencapai tujuan pengurangan satu piksel. Atau gunakan parseInt(div.style.width) di sisi kanan, tetapi ubah div sebagai berikut:
Copy kode kodenya sebagai berikut:
<div id="ok" style="lebar:200px:></div>
Solusi utama: gunakan currentstyle atau getcomputedstyle untuk mendapatkan properti.