[javascript] 브라우저 창을 기준으로 HTML 요소의 위치 (X, Y)를 검색합니다

브라우저 창을 기준으로 JavaScript img와 같은 HTML 요소의 X 및 Y 위치를 얻는 방법을 알고 싶습니다 div.

답변

올바른 접근 방식은 다음을 사용하는 것입니다 element.getBoundingClientRect().

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer는 관심이 있고 CSSOM보기 에서 표준화 된 이후로이를 지원했습니다 . 다른 모든 브라우저 는 오래 전에 그것을 채택했습니다 .

비표준이지만 일부 브라우저는 높이 및 너비 속성도 반환합니다. 이전 버전의 브라우저 호환성에 대해 걱정이되는 경우이 답변의 개정판에서 최적화 된 성능 저하 구현을 확인하십시오.

에서 반환 한 값 element.getBoundingClientRect()은 뷰포트와 관련이 있습니다. 다른 요소와 관련하여 필요하면 하나의 사각형을 다른 사각형에서 빼십시오.

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

답변

라이브러리는 요소의 정확한 오프셋을 얻기 위해 일정 길이로 이동합니다.
여기 내가 시도한 모든 상황에서 작업을 수행하는 간단한 기능이 있습니다.

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

답변

이것은 나를 위해 일했습니다 (최고 투표 답변에서 수정 됨).

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

이것을 사용하여 우리는 전화 할 수 있습니다

getOffset(element).left

또는

getOffset(element).top

답변

javascript 만 사용하려면 다음을 사용 하는 한 가지 라이너가 있습니다.getBoundingClientRect()

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y

window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X

첫 번째 줄은 offsetTop문서에 대해 Y라고 말합니다. 두 번째 줄은 offsetLeft문서에 대해 X라고 말합니다.

getBoundingClientRect() 창의 뷰포트를 기준으로 요소의 위치를 반환하는 자바 스크립트 함수입니다.

답변

대부분의 브라우저에서 HTML 요소는 다음과 같습니다.

offsetLeft
offsetTop

이들은 레이아웃을 가진 가장 가까운 부모를 기준으로 요소의 위치를 지정합니다. 이 부모는 종종 offsetParent 속성을 통해 액세스 할 수 있습니다.

IE와 FF3은

clientLeft
clientTop

이러한 속성은 덜 일반적이며 부모 클라이언트 영역과 함께 요소 위치를 지정합니다 (패딩 영역은 클라이언트 영역의 일부이지만 테두리와 여백은 아닙니다).

답변

페이지에 최소한 “DIV”가 포함되어 있으면 meouw에서 제공하는 함수는 “Y”값을 현재 페이지 제한을 초과하여 발생시킵니다. 정확한 위치를 찾으려면 offsetParent와 parentNode를 모두 처리해야합니다.

아래에 주어진 코드를 사용해보십시오 (FF2가 확인 됨).


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

답변

Element.prototype요소의 상단 / 왼쪽을 얻기 위해 두 가지 속성을 추가 할 수 있습니다 .

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

이것을 다음과 같이 부릅니다.

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

다음은 jQuery offset().top와 결과를 비교하는 데모입니다 .left. http://jsfiddle.net/ThinkingStiff/3G7EZ/