إحداثيات مستند jQuery x y لكائن DOM

Question

أحتاج إلى الحصول على إحداثيات X وY (بالنسبة إلى أعلى/يسار المستند) لعنصر DOM.لا يمكنني تحديد موقع أي مكونات إضافية أو خاصية أو طريقة jQuery يمكنها إعطائي هذه العناصر.يمكنني الحصول على الجزء العلوي واليسار من عنصر DOM، ولكن يمكن أن يكون ذلك مرتبطًا بالحاوية/الأصل الحالية أو بالوثيقة.

Answer 1

يمكنك استخدام أبعاد توصيل في [إهمال...مضمن في jQuery 1.3.2+]

عوض()
احصل على الإزاحة الحالية للعنصر المطابق الأول، بالبكسل، بالنسبة إلى وثيقة.

موضع()
الحصول على الموضع العلوي واليسرى للعنصر بالنسبة له تعويض الوالدين.

بمعرفة هذا، فالأمر سهل..(باستخدام بلدي قليلا مشروع Svg ك صفحة المثال)

var x = $("#wrapper2").offset().left;
var y = $("#wrapper2").offset().top;

console.log('x: ' + x + ' y: ' + y);

انتاج:

x: 53 y: 177

نأمل أن يساعد ما تبحث عنه.

إليك صورة للإزاحة () والموضع ()

استخدام الأشعة السينية

استخدام مطور ويب شريط الأدوات

Answer 2

وبلدي الحل هو البرنامج المساعد مع "الحلول": + D. لكن الأشغال!

jQuery.fn.getPos = function(){
        var o = this[0];
        var left = 0, top = 0, parentNode = null, offsetParent = null;
        offsetParent = o.offsetParent;
        var original = o;
        var el = o;
        while (el.parentNode != null) {
            el = el.parentNode;
            if (el.offsetParent != null) {
                var considerScroll = true;
                if (window.opera) {
                    if (el == original.parentNode || el.nodeName == "TR") {
                        considerScroll = false;
                    }
                }
                if (considerScroll) {
                    if (el.scrollTop && el.scrollTop > 0) {
                        top -= el.scrollTop;
                    }
                    if (el.scrollLeft && el.scrollLeft > 0) {
                        left -= el.scrollLeft;
                    }
                }
            }            
            if (el == offsetParent) {
                left += o.offsetLeft;
                if (el.clientLeft && el.nodeName != "TABLE") {
                    left += el.clientLeft;
                }
                top += o.offsetTop;
                if (el.clientTop && el.nodeName != "TABLE") {
                    top += el.clientTop;
                }
                o = el;
                if (o.offsetParent == null) {
                    if (o.offsetLeft) {
                        left += o.offsetLeft;
                    }
                    if (o.offsetTop) {
                        top += o.offsetTop;
                    }
                }
                offsetParent = o.offsetParent;
            }
        }
        return {
            left: left,
            top: top
        };
    };

والاستعمال:

var p = $("#wrapper2").getPos();
alert("top:"+p.top+"; left:"+p.left);

Answer 3

تعويض وظيفة سوف نفعل ذلك لك.

وهنا مثال على ذلك هو أنها تعطي:

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );