728x90 프론트엔드 좌표2 [프론트 엔드 / 자바스크립트] 좌표 값 구하기 (e.pageX / Y , e.clientX / Y ) [Front-end / Javascript] 프론트엔드 자바스크립트로 좌표 값 구하기 브라우저에서 좌표값은 크게 두가지 종류로 나뉘는데 첫번째는 "전체 스크롤 기준" 으로 구할 수 있고 두번째는 "현재 창 기준"으로 구할수 있다 기본 형태 //브라우저 전체 (스크롤 전체) 기준 좌표 값 event.pageX : 스크롤 전체 기준 X 좌표 값 event.pageY : 스크롤 전체 기준 Y 좌표 값 //현재 창 기준 좌표 값 event.clientX : 현재 창 기준 X 좌표 값 event.clientY : 현재 창 기준 Y 좌표 값 아래 예제는 클릭했을때 현재 포인터가 위치한 좌표를 구하는 예제이다 샘플 예제 출력 결과 2021. 5. 21. [프론트엔드 / 자바스크립트] 브라우저 엘리먼트 좌표 값 구하기 elem.getBoundingClientRect() [Front-End / Javascript] 브라우저 엘리먼트 좌표 값 구하기 기본 형태 elem.getBoundingClientRect(); 객체 구조 elem.getBoundingClientRect().x : 현재 창기준 x좌표 elem.getBoundingClientRect().y : 현재 창기준 y좌표 elem.getBoundingClientRect().width : 엘리먼트 가로 elem.getBoundingClientRect().height : 엘리먼트 세로 elem.getBoundingClientRect().top : 현재 창기준 세로 시작점 부터 엘리먼트 윗변 까지의 거리 elem.getBoundingClientRect().left : 현재 창기준 가로 시작점 부터 엘리먼트 왼쪽변 까지의 .. 2021. 5. 20. 이전 1 다음 728x90
