دعونا نلقي نظرة أولاً على كيفية حدوث هذا الخطأ.
نسخة الكود كما يلي:
<type type = "text/css">
#div1 {
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الخلفية: أحمر.
}
</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 ؛
نسخة الكود كما يلي:
<type type = "text/css">
#div1 {
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الخلفية: أحمر.
الحدود: 1px الصلبة #CCCCFF ؛
}
</style>
في هذا الوقت ، عند تشغيل الكود ، وجدت أن DIV كان يتزايد تدريجياً إلى اليمين. . . ظهر علة الصورة. . . . من الواضح أنه ناقص 1 ، لماذا يحدث هذا؟
دعونا نفكر في خصائص الإزاحة:
مثال: عرض DIV: 200 بكسل الحدود 1 بكسل. في الواقع ، فإن عرض الإزاحة الذي يحصل عليه هو 202 بكسل.
لذلك ، دعنا نتحدث عن ذلك مرة أخرى ، عندما بدأت الحركة لأول مرة ، كان عرض Div 200 بكسل ، وكان عرض الإزاحة 202
في هذا الوقت odiv.style.width = odiv.offsetwidth-1+'px' ؛ هذه الجملة تساوي Odiv.Style.Width = 202-1 = 201px ؛ ثم تعيين القيمة للعرض
عندما يتم تنفيذ هذه الجملة مرة أخرى ، فإن عرض DIV هو 201px ؛ في هذه الحالة ، سيتم إضافة 1 بكسل في كل مرة ، وسيصبح تدريجياً أكبر. هذا هو خطأ الإزاحة.
كيف تحل هذه المشكلة؟
في الواقع ، لا تحتاج إلى هذا العرض. نستخدم العرض! ! اكتب وظيفة للحصول على العرض مباشرة في نمط CSS
احصل على أنماط ليست بين السطور:
نسخة الكود كما يلي:
وظيفة getStyle (obj ، الاسم) {
if (obj.currentStyle) {
إرجاع OBJ.CurrentStyle [name] ؛
} آخر {
return getComputedStyle (OBJ ، null) [name] ؛
}
}
ثم نقوم بتعديل الكود الأصلي:
نسخة الكود كما يلي:
<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 [name] ؛
} آخر {
return getComputedStyle (OBJ ، null) [name] ؛
}
}
</script>
بهذه الطريقة لن تكون هناك مشاكل في تشغيل البرنامج.