JavaScript는 HTML 요소의 위치를 얻기 위한 속성을 제공합니다:
HTMLElement.offsetLeft
HTMLElement.offsetHeight
단, 이 두 속성에 저장된 값은 상대 값이 아니라는 점에 유의해야 합니다. 전체 브라우저에 대한 요소의 위치입니다. 캔버스의 절대 위치이지만 상위 요소의 위치에 대한 상대 위치, 즉 이 두 값은 왼쪽 상단을 기준으로 계산됩니다. 부모 요소의 (0,0) 지점입니다. 그렇다면 HTML 요소의 절대 위치를 얻는 방법은 다음과 같습니다.
//요소의 수직 좌표를 가져옵니다
function getTop(e){
var offset=e.offsetTop
if(e.offsetParent! =null) offset =getTop(e .offsetParent);
return offset;
}
//요소의 가로좌표 가져오기
function getLeft(e){
var offset=e .offsetLeft;
if(e.offsetParent!=null) offset =getLeft(e.offsetParent);
return offset
}
원칙은 HTMLElement를 사용하는 것입니다. .offsetParent 속성, 현재 요소의 상위 요소가 비어 있지 않은 경우(null) 현재 offsetTop을 원래 offsetTop에 추가한 다음 계속해서 상위 요소의 상위 요소의 offsetTop을 가져온 다음 이를 추가하고 마지막으로 전체 브라우저 캔버스를 기준으로 한 요소의 세로 좌표입니다. 가로좌표도 마찬가지입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
