문서에 대한 요소의 위치 찾기

문서에 대한 요소의 위치 찾기

문서/본문/브라우저 창을 기준으로 요소 위치를 결정하는 가장 쉬운 방법은 무엇입니까?

지금 사용하고 있습니다..offsetLeft/offsetTop, 그러나 이 메서드는 상위 요소에 상대적인 위치만 제공하므로 신체 요소에 대한 부모 수를 확인해야 신체/browser 창/document 위치에 상대적인 위치를 알 수 있습니다.

이 방법도 번거롭습니다.

다음과 같이 DOM을 횡단하지 않고 위와 왼쪽을 이동할 수 있습니다.

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

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

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

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

뷰포트를 기준으로 요소 위치를 검색하는 데 사용할 수 있습니다.

그런 다음 뷰포트 간격띄우기를 계산합니다.

이 둘의 합은 문서에 대한 요소 위치를 제공합니다.

element.getBoundingClientRect().top + document.documentElement.scrollTop

횡단할 수 있습니다.offsetParentDOM의 최상위 레벨까지.

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

offsetTop/offsetLeft를 트립시키는 에지 케이스를 처리할 때 가장 신뢰할 수 있는 방법은 다음과 같습니다.

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}

document-offset (제3자 스크립트)는 흥미롭고 여기에 있는 다른 답변들의 접근 방식을 활용하는 것 같습니다.

예:

var offset = require('document-offset')
var target = document.getElementById('target')
console.log(offset(target))
// => {top: 69, left: 108} 

를 사용하는 것을 제안합니다.

element.getBoundingClientRect()

offsetLeft, offsetTop 및 offsetParent를 통한 수동 오프셋 계산 대신 여기서 제안하는 바와 같이. 여기서 제안하는 바와 같이 일부 상황*에서 수동 횡단은 잘못된 결과를 생성합니다.이 플러그인 보기: http://plnkr.co/pC8Kgj

*요소가 정적(=default) 위치 설정이 있는 스크롤 가능한 부모의 내부에 있을 때.

문서를 기준으로 요소의 다양한 위치의 x 및 y 좌표를 얻고자 하는 경우.

const getCoords = (element, position) => {
  const { top, left, width, height } = element.getBoundingClientRect();
  let point;
  switch (position) {
    case "top left":
      point = {
        x: left + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "center left":
      point = {
        x: left + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "bottom left":
      point = {
        x: left + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
  }
  return point;
};

사용.

• getCoords(document.querySelector('selector'), 'center')

• getCoords(document.querySelector('selector'), 'bottom right')

• getCoords(document.querySelector('selector'), 'top center')

http://www.quirksmode.org/js/findpos.html 가장 좋은 방법을 설명합니다. 대체적으로, 여러분은 오프셋을 찾아 부모의 나무를 횡단해야 하는 올바른 길을 가고 있습니다.

jQuery를 사용하는 것이 괜찮다면, 사용할 수 있습니다.offset()기능.이 기능에 대한 자세한 내용은 설명서를 참조하십시오.

Safari를 포함한 모든 최신 브라우저에서 작동하는 간단한 답변:

let x = element.getBoundingClientRect().left + window.scrollX
let y = element.getBoundingClientRect().top + window.scrollY

언급URL : https://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document