افترض أن obj هو عنصر تحكم HTML
يشير obj.offsetTop إلى الموضع العلوي المحسوب لـ obj بالنسبة إلى التخطيط أو الإحداثي الأصلي المحدد بواسطة سمة OffsetParent، أو العدد الصحيح، أو وحدة البكسل.
يشير obj.offsetLeft إلى الموضع الأيسر المحسوب لـ obj بالنسبة إلى التخطيط أو الإحداثي الأصلي المحدد بواسطة سمة OffsetParent، أو العدد الصحيح، أو وحدة البكسل.
يشير obj.offsetWidth إلى العرض المطلق لعنصر تحكم obj نفسه، باستثناء الجزء الذي لا يتم عرضه بسبب التجاوز، أي العرض الذي يشغله بالفعل، عدد صحيح، وحدة بكسل.
يشير obj.offsetHeight إلى الارتفاع المطلق لعنصر تحكم الكائن نفسه، باستثناء الجزء الذي لم يتم عرضه بسبب التجاوز، أي الارتفاع الذي يشغله بالفعل، عدد صحيح، وحدة بكسل.
دعونا نشرح الـ OffsetParent المذكور سابقًا.
OffsetParent يحصل على مرجع لكائن الحاوية الذي يحدد خصائص offsetTop وoffsetLeft للكائن. إن OffsetTop و OffsetParent معقدان للغاية، والمتصفحات المختلفة لها تفسيرات مختلفة، والتفسير مختلف مرة أخرى، لذلك نحتاج بشكل عام فقط إلى فهم أنه يمكن الحصول على الموضع المطلق لعنصر التحكم في المتصفح من خلال الاثنين.
الخصائص المذكورة أعلاه صالحة أيضًا في FireFox.
بالإضافة إلى ذلك: ما نتحدث عنه هنا يشير إلى قيمة السمة لعنصر تحكم HTML، وليس document.body. إن قيمة document.body لها تفسيرات مختلفة في المتصفحات المختلفة (في الواقع، تنتج معظم البيئات عن تفسيرات مختلفة للمستند. الجسم، وليس بسبب تفسيرات مختلفة للإزاحة)
نحن نعلم أن OffsetTop يمكنه الحصول على موضع عنصر HTML من العنصر العلوي أو الخارجي، ويمكن أيضًا استخدام style.top والفرق بين الاثنين هو:
1. يقوم offsetTop بإرجاع رقم، بينما يقوم style.top بإرجاع سلسلة بالإضافة إلى الرقم، فإنه يحتوي أيضًا على الوحدة: px.
2. OffsetTop للقراءة فقط، في حين أن style.top قابل للقراءة والكتابة.
3. إذا لم يتم تحديد النمط العلوي لعنصر HTML، فسيقوم style.top بإرجاع سلسلة فارغة.
وينطبق الشيء نفسه على OffsetLeft وstyle.left وoffsetWidth وstyle.width وoffsetHeight وstyle.height.
ClientHeight
ليس لدى الجميع أي اعتراض على ClientHeight، فهم جميعًا يعتقدون أنه ارتفاع المنطقة المرئية من المحتوى، وهو ما يعني ارتفاع المنطقة التي يمكن رؤية المحتوى فيها في متصفح الصفحة شريط الأدوات الأخير وفوق شريط الحالة، ولا علاقة له بمحتوى الصفحة.
OffsetHeight
يعتقد IE وOpera أن offsetHeight = clientHeight + شريط التمرير + الحدود.
يعتبر NS وFF أن offsetHeight هو الارتفاع الفعلي لمحتوى صفحة الويب، والذي يمكن أن يكون أصغر من ClientHeight.
التمرير الارتفاع
يعتبر IE وOpera أن ارتفاع التمرير هو الارتفاع الفعلي لمحتوى صفحة الويب، والذي يمكن أن يكون أصغر من ارتفاع العميل.
يعتبر NS وFF أن التمرير هو ارتفاع محتوى صفحة الويب، ولكن الحد الأدنى للقيمة هو ClientHeight.
ببساطة
ClientHeight هو ارتفاع المنطقة التي يتم عرض المحتوى فيها من خلال المتصفح.
يعتقد NS وFF أن offsetHeight وscrollHeight كلاهما ارتفاعات محتوى الويب، ولكن عندما يكون ارتفاع محتوى الويب أقل من أو يساوي ClientHeight، فإن قيمة التمرير هي ClientHeight، ويمكن أن تكون OffsetHeight أقل من ClientHeight.
يعتبر IE وOpera أن offsetHeight هو شريط التمرير ClientHeight للمنطقة المرئية بالإضافة إلى الحدود. التمرير هو الارتفاع الفعلي لمحتوى صفحة الويب.
نفس السبب
تفسيرات ClientWidth وoffsetWidth وscrollWidth هي نفسها المذكورة أعلاه، فقط استبدل الارتفاع بالعرض.
يوضح
يعتمد ما ورد أعلاه على DTD HTML 4.01 Transitional. إذا كان DTD XHTML 1.0 Transitional، فسيكون المعنى مختلفًا في XHTML، جميع هذه القيم الثلاث هي نفس القيمة، مما يشير إلى الارتفاع الفعلي للمحتوى. تدعم معظم الإصدارات الجديدة من المتصفحات تمكين المترجمين الفوريين المختلفين بناءً على DOCTYPE المحدد في الصفحة.
ScrollTop هي قيمة الارتفاع "المدرفلة"، على سبيل المثال:
انسخ رمز الكود كما يلي:
<div معرف = "ص">
<div id="t">إذا تم تعيين التمرير للأعلى على p، فقد لا يتم عرض هذه المحتويات بالكامل. </div>
</div>
<نوع البرنامج النصي = "نص/جافا سكريبت">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
نظرًا لأنه تم تعيين التمرير للعنصر الخارجي p، فسيتم تمرير العنصر الداخلي لأعلى، والجزء المطوي هو التمرير للأعلى.
التمرير لليسار مشابه.
نحن نعلم بالفعل أن offsetHeight هو عرض العنصر الخاص به، وscrollHeight هو العرض المطلق للعنصر الداخلي، بما في ذلك الجزء المخفي من العنصر الداخلي. في ما سبق، يكون ارتفاع التمرير لـ p 300، وإزاحة ارتفاع p هو 100.
عرض التمرير مشابه.
يدعمه IE وFireFox بشكل كامل، بينما لا يدعم Netscape 8 وOpera 7.6 التمرير Top وscrollLeft (باستثناء document.body.scrollTop وdocument.body.scrollLeft).
1.ارتفاع العميل، عرض العميل:
تُظهر هاتان الخاصيتان تقريبًا ارتفاع وعرض محتوى العنصر بالبكسل. ومن الناحية النظرية، لا تأخذ هذه القياسات في الاعتبار أي شيء تمت إضافته من خلال ورقة الأنماط.
الهوامش والحدود وما إلى ذلك في العناصر.
2.clientLeft،clientTop:
يقوم هذان الخياران بإرجاع سمك الحد حول العنصر، إذا لم تحدد حدًا أو لم تضع العنصر، فستكون قيمته 0.
3.التمرير لليسار، التمرير للأعلى:
إذا كان العنصر قابلاً للتمرير، فيمكنك استخدام هاتين الخاصيتين لمعرفة مدى تمرير العنصر في الاتجاهين الأفقي والرأسي. الوحدة هي البكسل.
بالنسبة للعناصر غير القابلة للتمرير، تكون هذه القيم دائمًا 0.
4. ارتفاع التمرير، عرض التمرير:
بغض النظر عن عدد العناصر المرئية على الصفحة، فإنها تحصل على الكل.
5.style.left:
إزاحة العنصر الموجود من الحافة اليسرى للمستطيل الذي يحتوي عليه
6.style.pixelLeft:
تُرجع قيمة البكسل الصحيحة لإزاحة الحد الأيسر للعنصر المحدد لأن القيمة غير البكسلية للسمة تُرجع سلسلة تحتوي على الوحدة، على سبيل المثال، 30 بكسل. استخدم هذه السمة للتعامل مع القيم بالبكسل بشكل منفصل.
7.style:بوسليتف:
تُرجع القيمة الرقمية لإزاحة الحد الأيسر للعنصر المحدد، بغض النظر عن الوحدات المحددة بواسطة عنصر ورقة الأنماط المقابل، لأن القيمة غير الموضعية للسمة تُرجع سلسلة تحتوي على الوحدة، على سبيل المثال، 1.2em
فقط بعض التشبيهات مثل top، وpixelTop، وposTop ستكون كافية.
اليسار: هو الموضع الذي تم نقله من اليسار إلى اليمين، أي المسافة بين القلادة والحافة اليسرى للشاشة؛
يقوم ClientLeft بإرجاع المسافة بين قيمة خاصية OffsetLeft للكائن والقيمة الحقيقية إلى الجانب الأيسر من النافذة الحالية.
تُرجع OffsetLeft القيمة اليسرى للكائن بالنسبة إلى تخطيط الكائن الأصلي أو إحداثياته، حيث تأخذ الزاوية اليسرى العليا من الكائن الأصلي كأصل للإحداثيات، وتنسق إحداثيات x في الاتجاه الموجب للمحورين X وY. إلى اليمين وإلى الأسفل.
يقوم PixelLeft بتعيين أو إرجاع موضع الكائن بالنسبة إلى الجانب الأيسر من النافذة
التمرير هو عرض المحتوى الفعلي للكائن، باستثناء عرض الحافة، وسوف يتغير مع مقدار المحتوى في الكائن (قد يؤدي وجود الكثير من المحتوى إلى تغيير العرض الفعلي للكائن).
ClientWidth هو العرض المرئي للكائن، باستثناء أشرطة التمرير والحواف الأخرى، وسيتغير مع حجم عرض النافذة.
OffsetWidth هو العرض المرئي للكائن، بما في ذلك أشرطة التمرير والحواف الأخرى، وسيتغير مع حجم عرض النافذة.
IE6.0، FF1.06+:
عرض العميل = العرض + الحشو
ارتفاع العميل = الارتفاع + الحشو
OffsetWidth = العرض + الحشو + الحدود
إزاحة الارتفاع = الارتفاع + الحشو + الحدود
آي إي 5.0/5.5:
عرض العميل = العرض - الحدود
ClientHeight = height-border
إزاحة العرض = العرض
إزاحة الارتفاع = الارتفاع
(تجدر الإشارة إلى: سمة الهامش في CSS ليس لها علاقة بـclientWidth وoffsetWidth وclientHeight وoffsetHeight)
عرض الإزاحة: هو عرض الإزاحة للعنصر بالنسبة للعنصر الأصلي. يساوي الحدود + الحشو + العرض
عرض العميل: هو العرض المرئي للعنصر. يساوي الحشو + العرض
عرض التمرير: هو عرض العنصر بما في ذلك جزء التمرير.
OffsetLeft: موضع عنصر Html بالنسبة إلى عنصر offsetParent الخاص به
التمرير لليسار: إرجاع وتعيين القيمة الإحداثية لمهمة التمرير الأفقي الحالية
انسخ رمز الكود كما يلي:
<نوع الإدخال = "زر" القيمة = "انقر" عند النقر = "نقل ()">
<div id="d" style="background-color:#ff9966; الموضع:مطلق; اليسار:170px; الأعلى:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<لغة البرمجة = "جافا سكريبت">
نقل الوظيفة ()
{
فار د=document.getElementById("d")
أ=التقييم (20)
d.scrollLeft+=a
}
</script>
احفظ كصفحة ويب، وقم بتشغيلها، وانقر فوق الزر، ويتحرك شريط التمرير
انقر فوق div، وأظهر أولاً موضع b بالنسبة إلى a، ثم انبثق موضع قريب بالنسبة إلى النافذة.