jQuery XY DOM 객체의 문서 좌표

Question

DOM 요소의 X, Y 좌표 (문서의 상단/왼쪽에 대해)를 가져와야합니다. 플러그인이나 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 );