توضح هذه الكتابة كيفية عمل خاصية 'offsetTop' في JavaScript.
كيف تعمل خاصية 'offsetTop' لـ HTML DOM في JavaScript؟
ال ' تعويض تعمل خاصية 'على عناصر HTML وتعيد' الهامش '، و' الحشو 'العلوي ، و' الحد '، و' شريط التمرير 'للعنصر الأصل أيضًا.
بناء الجملة
عنصر. تعويض
في بناء الجملة هذا ، ' عنصر 'يشير إلى الموضع العلوي لعنصر HTML المحدد بالنسبة إلى إطار العرض (منطقة فارغة حيث يتم عرض محتوى صفحة الويب).
ملحوظة: تتضمن القيمة التي تم إرجاعها ما يلي:
- أعلى موضع ، وهامش العنصر.
- الحد العلوي وشريط التمرير والمساحة المتروكة للأصل.
دعونا نستخدم بناء الجملة أعلاه عمليا.
مثال: تطبيق خاصية 'offsetTop' لتقييم موضع HTML العلوي
يستخدم هذا المثال ' تعويض 'لحساب الموضع العلوي لعنصر HTML معين ، أي' أولاً ، انتقل إلى كود HTML التالي: في الكود أعلاه: الآن ، ضع في اعتبارك رمز JavaScript المحدد: في سطور الكود أعلاه: انتاج | في هذه النتيجة ، يمكن ملاحظة أن الموضع العلوي لـ div المحدد (بما في ذلك الهامش) ، أي ' 35 بكسل 'وفقًا للملاحظة المحددة (في بداية المدونة) ويتم عرضها عند النقر فوق الزر. توفر JavaScript ' تعويض 'لحساب الموضع العلوي لعنصر HTML المتعلق بإطار العرض. تُرجع الموضع العلوي المحسوب لعنصر كقيمة عدد صحيح في ' بكسل '. أظهرت هذه الكتابة الهدف ، واستخدام ، وتنفيذ خاصية 'offsetTop' لعنصر HTML DOM في JavaScript.
كود HTML
< ب > تفاصيل هذا هم div : ب > < ر >
قمة : 20 بكسل < ر >
موضع : نسبي < ر >
نص - محاذاة : مركز < ر >
هامِش : 15 بكسل < ر >
حدود : 3 بكسل < ر >
شعبة > < ر >
< زر عند النقر = 'jsFunc ()' > انقر فوقه زر >
< ع معرف = 'ل' > ص >
كود جافا سكريبت
وظيفة jsFunc ( ) {
كان elmnt = وثيقة. getElementById ( 'Div1' ) ؛
أين النص = 'OffsetTop المحسوب هو:' + elmnt. تعويض + 'بكسل
' ؛
وثيقة. getElementById ( 'ل' ) . داخلي HTML = رسالة قصيرة ؛
}
النصي >
خاتمة