يحصل JS على Offsettop و OffseSteLft وخصائص أخرى للعنصر
obj.clientwidth // احصل على عرض العنصر
obj.clientheight // ارتفاع العنصر
obj.offsetleft // العنصر بالنسبة إلى اليسار للعنصر الأصل
obj.offsettop // الجزء العلوي من العنصر بالنسبة للعنصر الأصل
obj.offsetwidth // عرض العنصر
obj.offsetheight // ارتفاع العنصر
الفرق:
عرض العميل = عرض + حشوة
ClientHeight = ارتفاع + حشوة
OffsetWidth = Width + Padding + Border
Offsetheight = عرض + حشوة + حدود
الأوفست له عرض الحدود أكثر من العميل
// احصل على الإحداثي الأفقي للعنصر (نسبة إلى النافذة) وظيفة getTop (e) {var offset = e.offsettop ؛ if (e.offSetParent! = null) الإزاحة+= getTop (e.offSetParent) ؛ إرجاع إزاحة ؛} // احصل على الإحداثي الأفقي للعنصر (نسبة إلى النافذة) getleft (e) {var offset = e.offsetleft ؛ if (e.offSetParent! = null) الإزاحة+= getLeft (eOffSetParent) ؛ إرجاع إزاحة ؛}لقد كتبت أيضًا مقالة JS حول الحصول على مواقع العناصر: تحصل JS على Offsettop للعنصر ، و Offsteleft والسمات الأخرى. يمكننا الحصول على موضع العنصر بالنسبة إلى النافذة من خلال سمات Offsettop و Offetleft ، ولكن يتم وضع سمات Offsettop و OffseSteSteleft بالنسبة للعنصر الأصل ، والعناصر التي تحتاج عادةً إلى الحصول على الموضع لا يمكن أن تكون في الطبقة الخارجية ، لذا فإن الأزياء التي تعاني من ذلك هي التي تنافس على العنصر العلوي. ثم تصبح الكفاءة مشكلة.
// احصل على الإحداثيات الأفقية للعنصر (نسبة إلى النافذة) وظيفة getTop (e) {var offset = e.offsettop ؛ if ( الإزاحة = e.offsetLeft ؛ if (e.offsetParent! = null) الإزاحة+= getLeft (e.offsetParent) ؛ إرجاع إزاحة ؛}لحسن الحظ ، قدم لي المتصفح الواجهة المقابلة getBoundingClientRect. ظهرت هذه الطريقة لأول مرة في متصفح IE. دعمت المتصفحات اللاحقة هذه الطريقة أيضًا ، وكانت أكثر مثالية. في IE ، يمكنهم فقط الحصول على سمات العناصر اليسرى والأعلى والأسفل واليمين ، ويمكن للمتصفحات الحديثة المتأخرة أيضًا الحصول على عرض وعرض العناصر.
| الكروم | Firefox (Gecko) | Internet Explorer | الأوبرا | سفاري |
|---|---|---|---|---|
| 1.0 | 3.0 (1.9) | 4.0 | (نعم) | 4.0 |
تجدر الإشارة هنا إلى أن القاع هو المسافة بين الجزء السفلي من العنصر وأعلى النافذة ، بدلاً من أسفل الموضع في CSS بالنسبة إلى أسفل النافذة. وبالمثل ، فإن سمة RIHGT هي المسافة بين العنصر الأيمن والجانب الأيسر من النافذة.
var box = document.getElementById ("box") ؛ var pos = box.getBoundingClientRect () ؛ box.innerhtml = "top:"+pos.top+"left:"+pos.left+"bottom:المقالات الأصلية ، يرجى الإشارة إلى إعادة الطباعة: أعيد طبعها من التنمية الأمامية