뷰포트에 상대적인 위치정보를 제공하는 API

브라우저에서 좌표찾기

getBoundingClientRect()

 

사용법

Element.getBoundingClientRect();

 

예시

const sbox = document.querySelector(".sbox");
document.addEventListener("click", (e) => {
    const rect = sbox.getBoundingClientRect();
    console.log(rect);
    console.log(`clinet: ${e.clientX}, ${e.clientY}`);
    console.log(`page: ${e.pageX}, ${e.pageY}`);
});

예시