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

이 함수는 페이지를 기준으로 요소의 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;

답변

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

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

var rect = el.getBoundingClientRect();

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

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

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;
}