programing

HTML 요소의 위치(X,Y)를 검색합니다.

shortcode 2022. 9. 6. 22:44
반응형

HTML 요소의 위치(X,Y)를 검색합니다.

Y.img ★★★★★★★★★★★★★★★★★」div자바스크립트

올바른 접근법은 다음과 같습니다.

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) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

이를 통해 X 위치를 얻을 수 있습니다.

getOffset(element).left

... 또는 Y 위치:

getOffset(element).top

라이브러리는 요소에 대한 정확한 오프셋을 얻기 위해 몇 가지 길이로 이동합니다.
제가 시도했던 모든 상황에서 제 역할을 하는 간단한 기능이 있습니다.

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; 

javascript로만 하고 싶은 경우는, 다음1개의 라이너를 사용해 주세요.

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

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

번째 됩니다.offsetTopYY로 하다됩니다.offsetLeft문서에 대해 X라고 합니다.

getBoundingClientRect() 창의 뷰포트에 상대적인 요소의 위치를 반환하는 Javascript 함수입니다.

대부분의 브라우저의 HTML 요소에는 다음이 있습니다.

offsetLeft
offsetTop

이것은 레이아웃이 있는 가장 가까운 부모 요소의 위치를 지정합니다.이 부모에는 offsetParent 속성을 통해 자주 액세스할 수 있습니다.

IE 및 FF3에는

clientLeft
clientTop

이러한 속성은 일반적이지 않고 부모 클라이언트 영역과 요소 위치를 지정합니다(패딩 영역은 클라이언트 영역의 일부이지만 테두리와 여백은 그렇지 않습니다).

페이지에 최소한 "DIV"가 포함된 경우, 뮤우가 제공하는 함수는 현재 페이지 제한을 초과하여 "Y" 값을 슬로우합니다.정확한 위치를 찾으려면 offsetParents와 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];
};

는 2개의 할 수 .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/

재귀 함수를 사용하지 않고 페이지와 관련된 위치를 효율적으로 검색하려면: (IE도 포함)

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

이와 같이 요소의 ID를 전달하면 왼쪽 또는 위쪽이 반환되므로 결합할 수도 있습니다.

1) 왼쪽 찾기

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2) 톱을 찾다

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

또는 3) 왼쪽과 위쪽을 함께 찾습니다.

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');

다음은 vanilla JS를 사용하여 및 을 반복적으로 반복하는 최신 1-라이너입니다.

기능:

getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent))

사용방법:

const el = document.querySelector('#div_id');
const elTop = getTop(el)

장점:

현재 스크롤 위치에 관계없이 항상 절대 수직 오프셋을 반환합니다.


기존 구문:

function getTop(el) {
  return el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
}

jQuery .offset()은 첫 번째 요소의 현재 좌표를 가져오거나 문서에 상대적인 일치 요소 집합에 있는 모든 요소의 좌표를 설정합니다.

이러한 정보를 브라우저에 의존하지 않고 반환하는 기능을 가진 JavaScript 프레임워크를 사용하는 것이 더 나을 수 있습니다.다음은 몇 가지 예입니다.

틀을 할 수 요.$('id-of-img').top이미지의 y자 좌표를 얻습니다.

업데이트:

(이전 답변에서는) 재귀적 접근법에 의해 다수의 콜스택이 생성됩니다.이 경우 while loop을 사용하여 재발을 방지할 수 있습니다.

/**
 *
 * @param {HTMLElement} el
 * @return {{top: number, left: number}}
 */
function getDocumentOffsetPosition(el) {
    let top = 0, left = 0;
    while (el !== null) {
        top += el.offsetTop;
        left += el.offsetLeft;
        el = el.offsetParent;
    }
    return {top, left};
}

오래된 답변:

/**
 *
 * @param {HTMLElement} el
 * @return {{top: number, left: number}}
 */
function getDocumentOffsetPosition(el) {
    var position = {
        top: el.offsetTop,
        left: el.offsetLeft
    };
    if (el.offsetParent) {
        var parentPosition = getDocumentOffsetPosition(el.offsetParent);
        position.top += parentPosition.top;
        position.left += parentPosition.left;
    }
    return position;
}

Thinking Stiff의 답변에 감사드립니다.이것은 다른 버전일 뿐입니다.

@meouw의 답변을 가져와 경계를 허용하는 client Left에 추가한 후 다음 3가지 버전을 만들었습니다.

getAbsoluteOffsetFromBody - @meouw와 마찬가지로 문서의 본문 또는 html 요소에 대한 절대 위치를 가져옵니다(쿼리 모드에 따라 다름).

getAbsoluteOffsetFromGivenElement - 지정된 요소(relativeEl)에 상대적인 절대 위치를 반환합니다.지정된 요소에는 요소 el이 포함되어 있어야 합니다.그렇지 않으면 getAbsoluteOffsetFromBody와 동일하게 동작합니다.이것은, 다른(이미 알려진) 요소(옵션으로 노드 트리 상단의 여러 노드)에 2개의 요소가 포함되어 있고, 그것들을 같은 위치로 하는 경우에 편리합니다.

getAbsoluteOffsetFromRelative - 첫 번째 부모 요소에 상대적인 절대 위치를 위치 relative로 반환합니다.이것은 같은 이유로 getAbsoluteOffsetFromGivenElement와 비슷하지만 첫 번째 일치 요소까지만 진행됩니다.

getAbsoluteOffsetFromBody = function( el )
{   // finds the offset of el from the body or html element
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromGivenElement = function( el, relativeEl )
{   // finds the offset of el from relativeEl
    var _x = 0;
    var _y = 0;
    while( el && el != relativeEl && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromRelative = function( el )
{   // finds the offset of el from the first parent with position: relative
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
        if (el != null)
        {
            if (getComputedStyle !== 'undefined')
                valString = getComputedStyle(el, null).getPropertyValue('position');
            else
                valString = el.currentStyle['position'];
            if (valString === "relative")
                el = null;
        }
    }
    return { top: _y, left: _x };
}

스크롤과 관련하여 문제가 계속 발생하는 경우 http://www.greywyvern.com/?post=331을 참조하십시오. 브라우저가 작동한다고 가정하면 문제가 없는 코드가 getStyle에서 하나 이상 발견되었지만 나머지는 전혀 테스트하지 않았습니다.

작은 것과 작은 것의 차이

function getPosition( 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 };
}

좌표의 예를 참조하십시오.http://javascript.info/tutorial/coordinates

jQuery를 사용하는 경우 간단한 해결책이 될 수 있습니다.

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>

jQuery를 사용하면 치수 플러그인이 뛰어나 원하는 것을 정확하게 지정할 수 있습니다.

예.

상대 위치, 절대 위치, 패딩 없는 절대 위치, 패딩 포함...

계속됩니다. 이것으로 할 수 있는 일이 많다고 합시다.

게다가 jQuery를 사용하면 파일 크기가 가볍고 사용하기 쉽다는 장점이 있습니다.이것 없이는 자바스크립트로 돌아갈 수 없습니다.

요소의 총 오프셋을 얻기 위해 모든 상위 오프셋을 반복적으로 합산할 수 있습니다.

function getParentOffset(el): number {
if (el.offsetParent) {
    return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
    return 0;
}
}

이 유틸리티 함수로 돔 요소의 총 상단 오프셋은 다음과 같습니다.

el.offsetTop + getParentOffset(el);

중 jQuery가 사용하는 입니다.offset 로 .로 합니다.getBoundingClientRect그후 ; 그,를 합니다.windowdocumentElementbody(일부러)

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

var els = document.getElementsByTagName("div");
var docEl = document.documentElement;

for (var i = 0; i < els.length; i++) {

  var rect = els[i].getBoundingClientRect();

  var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
  var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

  els[i].innerHTML = "<b>" + rectLeft + ", " + rectTop + "</b>";
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}
#rel {
  position: relative;
  left: 10px;
  top: 10px;
}
#abs {
  position: absolute;
  top: 250px;
  left: 250px;
}
<div id="rel"></div>
<div id="abs"></div>
<div></div>

이것은 제가 만든 것 중 가장 좋은 코드입니다(jQuery offset()와는 달리 iframe에서도 작동합니다).웹킷의 동작은 조금 다른 것 같습니다.

야우의 코멘트에 근거합니다.

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;
        // chrome/safari
        if ($.browser.webkit) {
            el = el.parentNode;
        } else {
            // firefox/IE
            el = el.offsetParent;
        }
    }
    return { top: _y, left: _x };
}

많은 답변의 밑바닥에서 이러한 내용이 손실될 가능성이 매우 높지만, 여기 있는 상위 솔루션은 나에게 효과가 없었습니다.
내가 말할 수 있는 한, 다른 어떤 대답도 도움이 되지 않았다.

상황:
HTML5 페이지에는 헤더 내의 네비게이션 요소(THE 헤더가 아니라 다른 요소의 헤더)인 메뉴가 있습니다.
사용자가 스크롤하면 네비게이션이 위에 붙기를 원했지만, 이전에는 헤더가 절대 위치에 있었습니다(다른 것을 살짝 오버레이 할 수 있었습니다).
" " " " " " " "Top이 변경되지 않았기 때문에 변경을 트리거하지 않았습니다.. 0이 됩니다.
이 두 가지를 사용하여 수행한 테스트(getBoundingClientRect 결과도 동일)에서는 네비게이션바 상단이 표시 가능한 페이지 상단으로 스크롤된 적이 있는지 여부를 알 수 없습니다(콘솔에서 보고한 바와 같이 단순히 스크롤이 발생하는 동안 동일한 번호를 유지했습니다).

★★★★★★
나에게 해답은 바로 이 기술을 활용하는 것이었다.

window.visualViewport.pageTop

pageTop 속성 값은 화면의 표시 가능한 섹션을 반영하므로 표시 가능한 영역의 경계를 기준으로 요소가 어디에 있는지 추적할 수 있습니다.

스크롤을 다룰 때는 이 솔루션을 사용하여 스크롤되는 요소의 움직임에 프로그래밍 방식으로 응답할 수 있습니다.
른른른
중요사항:이것은 현재 Chrome과 Opera에서는 동작하고 있습니다만, Firefox (6-2018)에서는 동작하고 있지 않습니다.파이어폭스가 visualViewport를 지원할 때까지 이 방법을 사용하지 않는 것이 좋습니다(곧 사용할 수 있기를 바랍니다).다른 것보다 훨씬 더 말이 된다.)


★★★★★★★
이 솔루션에 대한 메모입니다.
스크롤되는 요소의 움직임에 프로그래밍 방식으로 반응하는 상황에서 매우 가치 있는 것으로 판명된 내용이 여전히 적용 가능합니다.이 문제에 대한 더 나은 해결책은 CSS를 사용하여 요소 위에 스틱을 설정하는 것이었습니다.스틱을 사용하면 javascript를 사용하지 않고 요소를 상단에 유지할 수 있습니다(주의: 요소를 고정으로 변경하는 것만큼 효과적이지 않을 수 있지만 대부분의 경우 스틱 접근법이 우수합니다).

01 : 데: 01 :
그래서 저는 다른 페이지에서 조금 복잡한 스크롤 설정(시차와 메시지의 일부로 스크롤되는 요소)에서 요소의 위치를 검출해야 한다는 것을 깨달았습니다.그에서 제가 일을 할 과 같이 .

  let bodyElement = document.getElementsByTagName('body')[0];
  let elementToTrack = bodyElement.querySelector('.trackme');
  trackedObjPos = elementToTrack.getBoundingClientRect().top;
  if(trackedObjPos > 264)
  {
    bodyElement.style.cssText = '';
  }

이 답변이 지금 더 널리 유용하기를 바랍니다.

    
HTML program to show (x, y) of an
element by dragging mouse over it  you just copied it and use it on your own 
<!DOCTYPE html>
<html>
    <head>
        <title>
            position of an element
        </title>
        
        <!-- scropt to get position -->
        <script type = "text/javascript">
            function getPositionXY(element) {
                var rect = element.getBoundingClientRect();
                document.getElementById('text').innerHTML
                = 'X: ' + rect.x + '<br>' + 'Y: ' + rect.y;
            }
        </script>
    </head>
    
    <body>
        <p>Move the mouse over the text</p>
        
        <div onmouseover = "getPositionXY(this)">
            Position:
            <p id = 'text'></p>
        </div>
    
    </body>
</html>                 

이렇게 해서 오래된 브라우저와 호환이 되었습니다.

// For really old browser's or incompatible ones
    function getOffsetSum(elem) {
        var top = 0,
            left = 0,
            bottom = 0,
            right = 0

         var width = elem.offsetWidth;
         var height = elem.offsetHeight;

        while (elem) {
            top += elem.offsetTop;
            left += elem.offsetLeft;
            elem = elem.offsetParent;
        }

         right = left + width;
         bottom = top + height;

        return {
            top: top,
            left: left,
            bottom: bottom,
            right: right,
        }
    }

    function getOffsetRect(elem) {
        var box = elem.getBoundingClientRect();

        var body = document.body;
        var docElem = document.documentElement;

        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

        var clientTop = docElem.clientTop;
        var clientLeft = docElem.clientLeft;


        var top = box.top + scrollTop - clientTop;
        var left = box.left + scrollLeft - clientLeft;
        var bottom = top + (box.bottom - box.top);
        var right = left + (box.right - box.left);

        return {
            top: Math.round(top),
            left: Math.round(left),
            bottom: Math.round(bottom),
            right: Math.round(right),
        }
    }

    function getOffset(elem) {
        if (elem) {
            if (elem.getBoundingClientRect) {
                return getOffsetRect(elem);
            } else { // old browser
                return getOffsetSum(elem);
            }
        } else
            return null;
    }

자바스크립트의 좌표에 대한 자세한 내용은 http://javascript.info/tutorial/coordinates를 참조하십시오.

Andy E의 솔루션을 사용하여 사용자가 클릭하는 테이블 행의 링크에 따라 부트스트랩 2 모달 위치를 지정했습니다.페이지는 Tapestry 5 페이지이며, 아래 javascript는 Java 페이지 클래스로 Import됩니다.

javascript:

function setLinkPosition(clientId){
var bodyRect = document.body.getBoundingClientRect(),
elemRect = clientId.getBoundingClientRect(),
offset   = elemRect.top - bodyRect.top;
offset   = offset + 20;
$('#serviceLineModal').css("top", offset);

}

모달 코드:

<div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static" 
 tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>

<div class="modal-body">
    <t:zone t:id="modalZone" id="modalZone">
        <p>You selected service line number: ${serviceLineNumberSelected}</p>
    </t:zone>
</div>

<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <!-- <button class="btn btn-primary">Save changes</button> -->
</div>

루프 내 링크:

<t:loop source="servicesToDisplay" value="service" encoder="encoder">
<tr style="border-right: 1px solid black;">       
    <td style="white-space:nowrap;" class="add-padding-left-and-right no-border"> 
        <a t:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber" 
            t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}"
            onmouseover="setLinkPosition(this);">
            <i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} -->
        </a>
    </td>

페이지 클래스의 Java 코드:

void onServiceLineNumberSelected(String number){
    checkForNullSession();
    serviceLineNumberSelected = number;
    addOpenServiceLineDialogCommand();
    ajaxResponseRenderer.addRender(modalZone);
}

protected void addOpenServiceLineDialogCommand() {
    ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
        @Override
        public void run(JavaScriptSupport javascriptSupport) {
            javascriptSupport.addScript("$('#serviceLineModal').modal('show');");
        }
    });
}

이게 도움이 됐으면 좋겠는데, 이 게시물도 도움이 됐어요.

많은 조사와 테스트를 거친 결과, 이것은 효과가 있는 것으로 보인다.

function getPosition(e) {
    var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1);
    var x = 0, y = 0;
    while (e) {
        x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0);
        y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0);
        e = e.offsetParent;
    }
    return { x: x + window.scrollX, y: y + window.scrollY };
}

http://jsbin.com/xuvovalifo/edit?html,js,output 를 참조해 주세요.

이것도 밖에 던져버릴까 해서요.
브라우저에서는 수 : ) 。

Element.prototype.getOffsetTop = function() {
    return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop;
};
Element.prototype.getOffsetLeft = function() {
    return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft;
};
Element.prototype.getOffset = function() {
    return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()};
};

브라우저에 따라 테두리, 패딩, 여백 등이 다르게 렌더링되기 때문입니다.원하는 모든 루트 요소에서 특정 요소의 위쪽 및 왼쪽 위치를 정확한 치수로 검색하기 위한 작은 함수를 작성했습니다.

function getTop(root, offset) {
    var rootRect = root.getBoundingClientRect();
    var offsetRect = offset.getBoundingClientRect();
    return offsetRect.top - rootRect.top;
}

왼쪽 위치를 검색하려면 다음을 반환해야 합니다.

    return offsetRect.left - rootRect.left;

이것은 JS의 2행으로서 간단합니다.

var elem = document.getElementById("id");    
alert(elem.getBoundingClientRect());

왼쪽 및 맨 위에 대한 div 위치를 가져옵니다.

  var elm = $('#div_id');  //get the div
  var posY_top = elm.offset().top;  //get the position from top
  var posX_left = elm.offset().left; //get the position from left 

언급URL : https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element

반응형