ก่อนอื่นให้ดูว่าข้อผิดพลาดนี้เกิดขึ้นได้อย่างไร
การคัดลอกรหัสมีดังนี้:
<style type = "text/css">
#div1 {
ความกว้าง: 200px;
ความสูง: 200px;
ความเป็นมา: สีแดง;
-
</style>
การคัดลอกรหัสมีดังนี้:
<body>
<div id = "div1">
</div>
</body>
ต่อไปนี้เป็นรหัส JavaScript ที่ใช้ในการทดสอบโดยมีวัตถุประสงค์เพื่อให้ DIV ค่อยๆแคบลง
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = odiv.offsetWidth-1+'px';
}, 30);
</script>
รหัส JavaScript นั้นง่ายมากไม่มีปัญหาในการเรียกใช้และ DIV ที่คุณต้องการจะค่อยๆเล็กลง
ข้อผิดพลาดออฟเซ็ตนี้เกิดขึ้นได้อย่างไร?
ตอนนี้สิ่งมหัศจรรย์จะเกิดขึ้นถ้าเราย้ายสไตล์ - -
เราเพิ่มเส้นขอบสไตล์ลงใน DIV1: 1px Solid #CCCCFF;
การคัดลอกรหัสมีดังนี้:
<style type = "text/css">
#div1 {
ความกว้าง: 200px;
ความสูง: 200px;
ความเป็นมา: สีแดง;
ชายแดน: 1px Solid #CCCCFF;
-
</style>
ในเวลานี้เมื่อเรียกใช้รหัสฉันพบว่า DIV ค่อยๆเพิ่มขึ้นไปทางขวา - - ข้อบกพร่องของภาพปรากฏขึ้น - - - เห็นได้ชัดว่าเป็นลบ 1 ทำไมสิ่งนี้ถึงเกิดขึ้น?
ลองคิดเกี่ยวกับลักษณะของการชดเชย:
ตัวอย่าง: Div Width: 200px Border 1px ในความเป็นจริง OffsetWidth ที่เขาได้รับคือ 202px
ดังนั้นเรามาพูดถึงเรื่องนี้อีกครั้งเมื่อการเคลื่อนไหวเริ่มขึ้นครั้งแรกความกว้างของ DIV นั้นจริง ๆ แล้ว 200px และ OffsetWidth คือ 202
ในเวลานี้ odiv.style.width = odiv.offsetWidth-1+'px'; ประโยคนี้เท่ากับ odiv.style.width = 202-1 = 201px; จากนั้นกำหนดค่าให้กับความกว้าง
เมื่อประโยคนี้ถูกดำเนินการอีกครั้งความกว้างของ div คือ 201px; ในกรณีนี้จะมีการเพิ่ม 1px ในแต่ละครั้งและจะค่อยๆใหญ่ขึ้น นี่คือข้อผิดพลาดของการชดเชย
วิธีแก้ปัญหานี้?
จริงๆแล้วคุณไม่ต้องการ OffsetWidth นี้ เราใช้ความกว้าง! - เขียนฟังก์ชั่นเพื่อรับความกว้างโดยตรงในสไตล์ CSS
รับสไตล์ที่ไม่ได้อยู่ระหว่างบรรทัด:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getStyle (obj, ชื่อ) {
if (obj.currentstyle) {
ส่งคืน obj.currentstyle [ชื่อ];
} อื่น {
กลับ getComputedStyle (obj, null) [ชื่อ];
-
-
จากนั้นเราแก้ไขรหัสต้นฉบับ:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = parseint (getStyle (odiv, 'width'))-1+'px';
}, 30);
ฟังก์ชั่น getStyle (obj, ชื่อ) {
if (obj.currentstyle) {
ส่งคืน obj.currentstyle [ชื่อ];
} อื่น {
กลับ getComputedStyle (obj, null) [ชื่อ];
-
-
</script>
วิธีนี้จะไม่มีปัญหากับโปรแกรมที่ทำงาน