div / span 태그의 위치 가져 오기

누군가 지정되지 않은 경우 또는 요소 의 top& left위치 를 얻는 방법을 보여줄 수 있습니까 ?divspan

즉 :

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>

위의 경우 다음을 수행합니다.

document.getElementById('11a').style.top

의 값 55px이 반환됩니다. 그러나 span'12a'에 대해 시도하면 아무것도 반환되지 않습니다.

페이지에 / 속성을 지정할 수없는 div/ spans 가 여러 개 있지만 해당 요소 바로 아래에 를 표시해야합니다 .topleftdiv

이 함수는 페이지를 기준으로 요소의 x, y 위치를 알려줍니다. 기본적으로 모든 요소의 부모를 반복하고 오프셋을 함께 추가해야합니다.

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

그러나 컨테이너에 상대적인 요소의 x, y 위치를 원하면 다음과 같이하면됩니다.

var x = el.offsetLeft, y = el.offsetTop;

이 요소 바로 아래에 요소를 배치하려면 높이도 알아야합니다. 이것은 offsetHeight / offsetWidth 속성에 저장됩니다.

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;

getBoundingClientRect()요소에 대한 참조 에서 메서드 를 호출 할 수 있습니다 . 그런 다음 검사 할 수 있습니다 top, left, right및 / 또는 bottom속성을 ...

var offsets = document.getElementById('11a').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;

jQuery를 사용하는 경우 더 간결한 코드를 사용할 수 있습니다.

var offsets = $('#11a').offset();
var top = offsets.top;
var left = offsets.left;

@nickf의 대답이 작동하는 동안. 이전 브라우저를 신경 쓰지 않는다면이 순수한 자바 스크립트 버전을 사용할 수 있습니다. IE9 + 및 기타에서 작동

var rect = el.getBoundingClientRect();

var position = {
  top: rect.top + window.pageYOffset,
  left: rect.left + window.pageXOffset
};

Alex가 언급했듯이 jQuery offset ()을 사용하여 문서 흐름과 관련된 위치를 가져올 수 있습니다. 부모에 상대적인 x, y 좌표에 position ()을 사용하십시오.

편집 : 단순히 DOM을 준비하는 대신 크기를 얻을 수 있도록 모든 요소를 ​​기다리기 때문에 전환 document.ready되었습니다 . 내 경험상 Javascript 위치 요소가 더 적습니다.window.loadloadload

$(window).load(function(){ 
  // Log the position with jQuery
  var position = $('#myDivInQuestion').position();
  console.log('X: ' + position.left + ", Y: " + position.top );
});

맨 위 또는 왼쪽 위치 만 필요한 사람에게는 @Nickf의 읽기 가능한 코드를 약간 수정하면 트릭이됩니다.

function getTopPos(el) {
    for (var topPos = 0;
        el != null;
        topPos += el.offsetTop, el = el.offsetParent);
    return topPos;
}

과

function getLeftPos(el) {
    for (var leftPos = 0;
        el != null;
        leftPos += el.offsetLeft, el = el.offsetParent);
    return leftPos;
}

나는 이것이 오래된 스레드라는 것을 알고 있지만 @alex의 대답은 정답으로 표시되어야합니다.

element.getBoundingClientRect() jQuery와 정확히 일치합니다. $(element).offset()

그리고 그것은 IE4 +와 호환됩니다 ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect