كيف يمكنني الحصول على موقف كائن مطلق على الصفحة في جافا سكريبت؟ [مكرر

Question

هذا السؤال لديه بالفعل إجابة هنا:

• استرداد الموضع (X، Y) عنصر HTML 26 إجابات

أريد الحصول على موقف X المطلق X، Y على الصفحة في JavaScript. كيف يمكنني أن أفعل هذا؟

حاولت obj.offsetTop و obj.offsetLeft, ، لكن تلك الوحيدة تعطي الموقف بالنسبة للعنصر الوالد. أعتقد أنني أستطيع حلقة وإضافة إزاحة الوالدين، وإزاحة الوالدين، وما إلى ذلك حتى أصل إلى الكائن دون الوالد، ولكن يبدو أنه يجب أن يكون هناك طريقة أفضل. لم يحضر Googling كثيرا، وحتى البحث في الموقع لا يجد أي شيء.

أيضا، لا أستطيع استخدام jQuery.

Answer 1

var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

(طريقة سرقت بشكل خادع من prototypejs؛ نمط الكود، الأسماء المتغيرة وقيمة الإرجاع تغيرت لحماية الأبرياء)

Answer 2

بالتأكيد أود أن أقترح باستخدام Element.getBoundingClientRect ().

https:/developer.mozilla.org/en-us/docs/web/api/element.getBoundingClientRect.

ملخص

إرجاع كائن مستطيل النص الذي يحبط مجموعة من المستطيلات النصية.

بناء الجملة

var rectObject = object.getBoundingClientRect();

عائدات

القيمة التي تم إرجاعها هي textrectangle. الكائن الذي هو اتحاد المستطيلات التي تم إرجاعها بواسطة getclientrects () بالنسبة للعنصر، أي صناديق الحدود CSS المرتبطة بالعنصر.

القيمة التي تم إرجاعها هي TextRectangle كائن، الذي يحتوي على للقراءة فقط left, top, right و bottom خصائص تصف مربع الحدود، في بكسل، مع الجزء العلوي الأيسر بالنسبة لأعلى اليسار من Viewport.

إليك جدول توافق المتصفح مأخوذ من موقع MDN المرتبط:

+---------------+--------+-----------------+-------------------+-------+--------+
|    Feature    | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
+---------------+--------+-----------------+-------------------+-------+--------+
| Basic support | 1.0    | 3.0 (1.9)       | 4.0               | (Yes) | 4.0    |
+---------------+--------+-----------------+-------------------+-------+--------+

إنه مدعوم على نطاق واسع، وهو سهل الاستخدام حقا، ناهيك عن أنه سريع حقا. إليك مقالة ذات صلة من John Resig: http://ejohn.org/blog/getboundingclientRect-is-awesome/

يمكنك استخدامه مثل هذا:

var logo = document.getElementById('hlogo');
var logoTextRectangle = logo.getBoundingClientRect();

console.log("logo's left pos.:", logoTextRectangle.left);
console.log("logo's right pos.:", logoTextRectangle.right);

هنا بسيط حقا مثال: http://jsbin.com/awisom/2. (يمكنك عرض وتعديل الرمز بالنقر فوق "تحرير في JS بن" في الزاوية اليمنى العليا).

أو إليك واحدة أخرى باستخدام وحدة التحكم في Chrome:

ملحوظة:

يجب أن أذكر أن width و height سمات getBoundingClientRect() قيمة العودة الطريقة هي undefined في Internet Explorer 8. يعمل في Chrome 26.x، Firefox 20.x والأوبرا 12.x على الرغم من. الحل البديل في IE8: ل width, ، يمكنك طرح السمات اليمنى واليسار قيمة الإرجاع، ولل height, ، يمكنك طرح السمات أسفل وأعلى (مثله).