Pertama -tama mari kita lihat bagaimana bug ini terjadi.
Salinan kode adalah sebagai berikut:
<type style = "text/css">
#Div1 {
Lebar: 200px;
Tinggi: 200px;
Latar Belakang: Merah;
}
</tyle>
Salinan kode adalah sebagai berikut:
<body>
<Div id = "Div1">
</div>
</body>
Berikut ini adalah kode JavaScript yang digunakan untuk menguji, dengan tujuan membuat div secara bertahap mempersempit.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
setInterval (function () {
var odiv = document.geteLementById ("div1");
odiv.style.width = odiv.offsetWidth-1+'px';
}, 30);
</script>
Kode JavaScript sangat sederhana, tidak ada masalah menjalankannya, dan div yang Anda inginkan secara bertahap semakin kecil.
Jadi bagaimana bug offset ini terjadi?
Sekarang, sesuatu yang ajaib akan terjadi jika kita memindahkan gaya. . .
Kami menambahkan perbatasan gaya ke Div1: 1px solid #ccccff;
Salinan kode adalah sebagai berikut:
<type style = "text/css">
#Div1 {
Lebar: 200px;
Tinggi: 200px;
Latar Belakang: Merah;
Perbatasan: 1px solid #ccccff;
}
</tyle>
Pada saat ini, ketika menjalankan kode, saya menemukan bahwa div secara bertahap meningkat ke kanan. . . Bug gambar muncul. . . . Jelas minus 1, mengapa ini terjadi?
Mari kita pikirkan tentang karakteristik offset:
Contoh: Lebar Div: 200px Border 1px. Bahkan, offsetwidth yang didapatnya adalah 202px.
Jadi, mari kita bicarakan lagi, ketika gerakan pertama kali dimulai, lebar div sebenarnya 200px, dan offsetwidth adalah 202
Pada saat ini odiv.style.width = odiv.offsetWidth-1+'px'; Kalimat ini sama dengan odiv.style.width = 202-1 = 201px; dan kemudian tetapkan nilai ke lebar
Ketika kalimat ini dieksekusi lagi, lebar div adalah 201px; Dalam hal ini, 1px akan ditambahkan setiap kali, dan secara bertahap akan menjadi lebih besar. Ini adalah bug offset.
Bagaimana cara menyelesaikan masalah ini?
Sebenarnya, Anda tidak perlu offsetwidth ini. Kami menggunakan lebar! Lai Tulis fungsi untuk secara langsung mendapatkan lebar dalam gaya CSS
Dapatkan gaya yang tidak ada di antara garis:
Salinan kode adalah sebagai berikut:
fungsi getstyle (obj, name) {
if (obj.currentstyle) {
kembalikan obj.currentstyle [nama];
} kalau tidak {
return getComputedStyle (obj, null) [name];
}
}
Lalu kami memodifikasi kode asli:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
setInterval (function () {
var odiv = document.geteLementById ("div1");
odiv.style.width = parseInt (getStyle (odiv, 'width'))-1+'px';
}, 30);
fungsi getstyle (obj, name) {
if (obj.currentstyle) {
kembalikan obj.currentstyle [nama];
} kalau tidak {
return getComputedStyle (obj, null) [name];
}
}
</script>
Dengan cara ini tidak akan ada masalah dengan program berjalan.