절대 위치 구하기 (제이쿼리 사용하지 않고)

제이쿼리를 사용하지 못 하는 상황에서 한 element의 왼상단에 아이콘을 띄우는 작업을 하려고 했다.

처음에 style.top 속성(offsetTop과 동일)을 사용했는데

 div안에 element가 있을 경우에 위치에 오류가 있었다.

icon.style.position = 'absolute';
icon.style.top = element.style.top.replace('px', '') - 27 + 'px';
icon.style.left = element.style.left;

 

제이쿼리를 사용할 때

let top = $(element).offset().top
let lfet = $(element).offset().left

 

제이쿼리를 사용하지 않고 직접 계산

    function getElementAbsoluteTop(element) {
      let top = element.offsetTop;
      let parent = element.offsetParent;
      
      while (parent !== null) {
        top += parent.offsetTop;
        parent = parent.offsetParent;
      }
      
      return top;
    }
    
    function getElementAbsoluteLeft(element) {
      let left = element.offsetLeft;
      let parent = element.offsetParent;
      
      while (parent !== null) {
        left += parent.offsetLeft;
        parent = parent.offsetParent;
      }
      
      return left;
    }