دعونا نلقي نظرة على الروتين أدناه
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
فار الموقت
وظيفة توقف الحركة () {
الفاصل الزمني الواضح (المؤقت)
}
وظيفة بدء الحركة () {
فار div=document.getElementById('موافق')
الفاصل الزمني الواضح (المؤقت)
الموقت = setInterval (وظيفة () {
ok.style.width=ok.offsetWidth-1+'px' ;// من الناحية النظرية يجب أن يتناقص العرض، لكنه في الواقع يتزايد. السبب هو سمة الحدود في ورقة الأنماط، والتي يمكن حلها عن طريق إزالتها .
},20)
}
</script>
<نمط النوع = "نص/CSS">
* {الهامش: 0؛ الحشو: 0}
الجسم {حجم الخط: 14px؛ ارتفاع الخط: 24px؛ الهامش: 0px؛ الحشو: 0px؛}
#ok{العرض:800px;الارتفاع: 200px;لون الخلفية:أخضر داكن;الحدود: 1px أحمر صلب }
</نمط>
</الرأس>
<الجسم>
<div معرف = "موافق"></div>
انتبهوا للتعليقات، لماذا تحدث هذه الظاهرة؟ في الواقع، يحدث ذلك بسبب الحدود، لأن ok.style.width يحدد عرض div، ويشير عرض الإزاحة إلى العرض الفعلي، بما في ذلك عرض الحدود. ولذلك، فإن قيمة العرض التي تم الحصول عليها بواسطة الصيغة الموجودة على اليمين هي في الواقع أكبر بمقدار بكسل واحد من تلك الموجودة على اليسار. والحل هو طرح 3 بكسل في كل مرة لتحقيق غرض طرح بكسل واحد فعليًا. أو استخدم parseInt(div.style.width) على الجانب الأيمن، ولكن قم بتعديل div كما يلي:
انسخ رمز الكود كما يلي:
<div id="ok" style="width:200px:></div>
الحل النهائي: استخدم النمط الحالي أو getcomputedstyle للحصول على الخصائص.