في بعض الأحيان ، في المشروع ، تستخدم JS للحصول على مواقع العناصر لتحديد العناصر. أولاً ، استخدم الصورة لشرح العلاقة بين Scrollwidth و Clientwidth و OffsetWidth.
مقدمة موجزة عن JS الحصول على العديد من العروض والارتفاعات :
Scrollheight: يحصل على ارتفاع التمرير للكائن.
التمرير: قم بتعيين أو احصل على المسافة بين الحدود اليسرى للكائن والنهاية اليسرى للمحتوى المرئي حاليًا في النافذة
Scrolltop: قم بتعيين أو احصل على المسافة بين الجزء العلوي من الكائن وأعلى المحتوى المرئي في النافذة
التمرير: احصل على عرض التمرير للكائن
Offsetheight: يحصل على ارتفاع الكائن بالنسبة إلى التصميم أو الإحداثي الأصل المحدد بواسطة خاصية الإحداثيات الإحداثي الأصل
OffsetLeft: يحصل على الموضع الأيسر المحسوب للكائن بالنسبة إلى التخطيط أو الإحداثيات الأصل المحددة بواسطة خاصية الإزاحة
Offsettop: يحصل على الموضع الأعلى المحسوب للكائن بالنسبة إلى التصميم أو الإحداثي الأصل المحدد بواسطة خاصية Offsettop
Event.Clientx الإحداثيات الأفقية بالنسبة إلى المستند
Event.clienty الإحداثيات الرأسية بالنسبة للوثيقة
Event.Offsetx الإحداثيات الأفقية نسبة إلى الحاوية
Event.Offsety الإحداثيات الرأسية نسبة إلى الحاوية
document.documentElement.scrolltop قيمة التمرير رأسياً
event.clientx + document.documentElement.scrolltop نسبة إلى الإحداثي الأفقي للوثيقة + مقدار التمرير في الاتجاه الرأسي
ما ورد أعلاه يشير بشكل أساسي إلى IE ، والاختلافات في Firefox هي كما يلي:
IE6.0 ، FF1.06+:
عرض العميل = عرض + حشوة
ClientHeight = ارتفاع + حشوة
OffsetWidth = Width + Padding + Border
Offsetheight = ارتفاع + حشوة + الحدود
IE5.0/5.5:
عرض العميل = العرض - الحدود
العميل = الارتفاع - الحدود
OffsetWidth = العرض
OffSetheight = الارتفاع
(تجدر الإشارة إلى أن سمة الهامش في CSS لا علاقة لها بعرض Clientwidth و OffsetWidth و ClientHeight و Offsetheight)
عرض الإزاحة (العرض+الحدود+الحدود)
افترض أن OBJ هو التحكم في HTML.
يشير OBJ.Offsettop إلى الموقف ، عدد صحيح ، وحدة بكسل من OBJ إلى التحكم العلوي أو العلوي.
يشير OBJ.OffSetLeft إلى الموضع ، عدد صحيح ، وحدة بكسل من OBJ إلى التحكم اليسرى أو العليا.
يشير OBJ.OffsetWidth إلى العرض ، وبكسلات الصدفة ، والوحدة الخاصة بالسيطرة على OBJ نفسها. يحصل على عرض المحتوى المرئي للكائن ، باستثناء أشرطة التمرير ، والحدود ؛
يشير Obj.OffSetheight إلى الارتفاع ، عدد صحيح ، وحدة بكسل وحدة التحكم في OBJ نفسها.
الفرق بين عرض الإزاحة والأناقة.
1. إرجاع Offsettop رقمًا ، بينما يقوم Style.top بإرجاع سلسلة ، والتي تحتوي أيضًا على الوحدة: PX بالإضافة إلى الرقم.
2. Offsettop هو قراءة فقط ، في حين أن style.top هو القراءة.
3. إذا لم يتم تحديد نمط أعلى لعناصر HTML ، فإن Style.Top يعيد سلسلة فارغة.