Penyelesaian pepijat Offset Javascript dalam kemahiran motion_javascript

Mari kita lihat dahulu bagaimana pepijat ini berlaku.

Salin kod Kod adalah seperti berikut: #div1 { lebar: 200px; tinggi : 200px; latar belakang: merah; }

Salin kod Kod adalah seperti berikut:

Berikut adalah kod Javascript yang digunakan untuk ujian, tujuannya adalah untuk membuat div perlahan-lahan sempit.

Salin kod

Kod adalah seperti berikut: set Interval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=oDiv.offsetWidth-1 'px'; },30);

Kod Javascript sangat mudah Jika anda menjalankannya, div yang dikehendaki akan menjadi lebih kecil.

Dari mana datangnya pepijat offset ini?

Sekarang mari kita gerakkan gaya dan sesuatu yang ajaib akan berlaku. . . Kami menambah sempadan gaya pada div1: 1px pepejal #CCCCFF;

Salin kod

Kod adalah seperti berikut:

#div1 { lebar: 200px; ketinggian : 200px; latar belakang: merah; sempadan: 1px pepejal #CCCCFF; } Semasa saya menjalankan kod pada masa ini, saya mendapati bahawa div semakin meningkat ke kanan. . . gambar BUG tiba-tiba muncul. . . . Ia jelas tolak 1. Mengapa ini berlaku?

Mari kita fikirkan tentang ciri-ciri offset:

Contoh: lebar div: 200px jidar 1px. Sebenarnya offsetWidth yang dia dapat ialah 202px.

Jadi, mari kita bercakap mengenainya Apabila pergerakan mula-mula bermula, lebar div sebenarnya ialah 200px, jadi offsetWidth ialah 202

Pada masa ini oDiv.style.width=oDiv.offsetWidth-1 'px';

Apabila ayat ini dilaksanakan semula, lebar div ialah 201px; dalam kes ini, ia akan meningkat sebanyak 1px setiap kali, tetapi ia akan menjadi lebih besar secara beransur-ansur. Ini ialah pepijat offset.

Bagaimana untuk menyelesaikan masalah ini?

Malah, anda tidak memerlukan offsetWidth ini. Kami menggunakan lebar! ! Tulis fungsi untuk mendapatkan lebar secara langsung dalam gaya css

Dapatkan gaya yang tidak berada di antara baris:

Salin kod Kod adalah seperti berikut: fungsi getStyle(obj, nama) { Jika (obj.currentStyle) { kembalikan obj.currentStyle[nama]; } lain { kembali getComputedStyle(obj, null)[nama]; } }

Kemudian mari kita ubah suai kod asal:

Salin kod Kod adalah seperti berikut: set Interval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1 'px'; },30); fungsi getStyle(obj, nama) { Jika (obj.currentStyle) { kembalikan obj.currentStyle[nama]; } lain { kembali getComputedStyle(obj, null)[nama]; } }

Dengan cara ini program akan berjalan tanpa sebarang masalah.