Javascript에서 페이지에서 객체의 절대 위치를 어떻게 얻을 수 있습니까?

Javascript에서 페이지에서 객체의 절대 위치를 어떻게 얻을 수 있습니까? [복제]

---

이 질문에 이미 답변이 있습니다.

• HTML 요소의 위치 (X, Y) 검색 26 답변

Javascript의 페이지에서 개체의 절대 x, y 위치를 얻고 싶습니다. 어떻게 할 수 있습니까?

나는 시도 obj.offsetTop하고 obj.offsetLeft, 그러나 그는 부모 요소에 대한 위치를 제공합니다. 부모가없는 객체에 도달 할 때까지 반복해서 부모의 오프셋과 부모의 오프셋 등을 추가 할 수 있다고 생각하지만 더 나은 방법이있는 것 같습니다. 인터넷 검색은 많이 나타나지 않았고 SO 사이트 검색조차도 아무것도 찾지 못했습니다.

또한 jQuery를 사용할 수 없습니다.

---

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에서 뻔뻔스럽게 도난당한 방법; 무고한 사람을 보호하기 위해 코드 스타일, 변수 이름 및 반환 값 변경)

---

element.getBoundingClientRect () 사용하는 것이 좋습니다 .

https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

요약

텍스트 사각형 그룹을 포함하는 텍스트 사각형 개체를 반환합니다.

통사론

var rectObject = object.getBoundingClientRect();

보고

반환 된 값은 요소, 즉 요소와 관련된 CSS 테두리 상자에 대해 getClientRects () 에 의해 반환 된 사각형의 합집합 인 TextRectangle 객체입니다 .

반환 값은이다 TextRectangle읽기 전용 포함 객체, left, top, right및 bottom받는 좌상 상대적으로 픽셀 경계 박스를 나타내는 특성 뷰포트의 상단 왼쪽.

다음은 연결된 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 Bin에서 편집" 을 클릭하여 코드를보고 편집 할 수 있습니다 ).

또는 Chrome 콘솔을 사용하는 또 다른 방법이 있습니다.

노트 :

메서드의 반환 값 width과 height속성은 Internet Explorer 8에 있음을 언급해야 합니다. Chrome 26.x, Firefox 20.x 및 Opera 12.x에서는 작동합니다. IE8의 해결 방법 :의 경우 반환 값의 오른쪽 및 왼쪽 속성을 뺄 수 있고의 경우 하단 및 상단 속성을 뺄 수 있습니다 ( 이와 같이 ).getBoundingClientRect()undefinedwidthheight

참고 URL : https://stackoverflow.com/questions/1480133/how-can-i-get-an-objects-absolute-position-on-the-page-in-javascript