Mari kita lihat dahulu bagaimana pepijat ini berlaku. Salin kod Kod adalah seperti berikut: <br> #div1 {<br> lebar: 200px;<br> tinggi : 200px;<br> latar belakang: merah;<br> }<br> <br><br> </div> <p></p> <div class="codetitle"><span>Salin kod<a style="CURSOR: pointer" data="90578" class="copybut" id="copybut90578" onclick="doCopy('code90578')"><u></u> Kod adalah seperti berikut:</a></span></div> <badan><div class="codebody" id="code90578"> <div id="div1"><br> </body><br> <br><br> <br>Berikut adalah kod Javascript yang digunakan untuk ujian, tujuannya adalah untuk membuat div perlahan-lahan sempit. <br> </div> <p></p> <p>Salin kod</p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="68552" class="copybut" id="copybut68552" onclick="doCopy('code68552')"> Kod adalah seperti berikut:<u></u></a> <script type="text/javascript"></span> set Interval(function(){</div> var oDiv=document.getElementById("div1");<div class="codebody" id="code68552"> oDiv.style.width=oDiv.offsetWidth-1 'px';<br> },30);<br> <br><br> <br>Kod Javascript sangat mudah Jika anda menjalankannya, div yang dikehendaki akan menjadi lebih kecil. <br> <br>Dari mana datangnya pepijat offset ini? <br> <br>Sekarang mari kita gerakkan gaya dan sesuatu yang ajaib akan berlaku. . . </div> Kami menambah sempadan gaya pada div1: 1px pepejal #CCCCFF;<p> </p> <p></p> <p></p>Salin kod<p></p> <p> Kod adalah seperti berikut:</p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="8073" class="copybut" id="copybut8073" onclick="doCopy('code8073')"> <style type="text/css"><u> #div1 {</u> lebar: 200px;</a> ketinggian : 200px;</span> latar belakang: merah;</div> sempadan: 1px pepejal #CCCCFF;<div class="codebody" id="code8073"> }<br> <br> <p>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? </p> <p>Mari kita fikirkan tentang ciri-ciri offset: </p> <p>Contoh: lebar div: 200px jidar 1px. Sebenarnya offsetWidth yang dia dapat ialah 202px. </p> <p>Jadi, mari kita bercakap mengenainya Apabila pergerakan mula-mula bermula, lebar div sebenarnya ialah 200px, jadi offsetWidth ialah 202</p> <p>Pada masa ini oDiv.style.width=oDiv.offsetWidth-1 'px'; </p>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. <p> </p>Bagaimana untuk menyelesaikan masalah ini? <p> </p>Malah, anda tidak memerlukan offsetWidth ini. Kami menggunakan lebar! ! Tulis fungsi untuk mendapatkan lebar secara langsung dalam gaya css <p> </p>Dapatkan gaya yang tidak berada di antara baris: <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="89510" class="copybut" id="copybut89510" onclick="doCopy('code89510')">Salin kod<u></u></a> Kod adalah seperti berikut:</span></div> <div class="codebody" id="code89510"> fungsi getStyle(obj, nama) {<br> Jika (obj.currentStyle) {<br> kembalikan obj.currentStyle[nama];<br> } lain {<br> kembali getComputedStyle(obj, null)[nama];<br> }<br> }<br> <br> </div> Kemudian mari kita ubah suai kod asal: <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="71756" class="copybut" id="copybut71756" onclick="doCopy('code71756')">Salin kod<u></u></a> Kod adalah seperti berikut:</span></div> <div class="codebody" id="code71756"> <script type="text/javascript"><br> set Interval(function(){<br> var oDiv=document.getElementById("div1");<br> oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1 'px';<br> },30);<br> fungsi getStyle(obj, nama) {<br> Jika (obj.currentStyle) {<br> kembalikan obj.currentStyle[nama];<br> } lain {<br> kembali getComputedStyle(obj, null)[nama];<br> }<br> }<br> <br><br> </div> Dengan cara ini program akan berjalan tanpa sebarang masalah. <br> </div>
