-
게임화면속 마우스 클릭 위치를 알려주는 함수만들기Javascript 2023. 1. 21. 09:44
자바스크립트 - 마우스가 클릭되는 윈도우의 좌표 알아내기
<html> <header> <!-- By the way, this is not the actual html file, just a generic example. --> <script src='game.js'></script> </header> <body> <div id="example"> <p id="test">x: , y:</p> </div> </body> </html>
function printMousePos(event) { document.body.textContent = "clientX: " + event.clientX + " - clientY: " + event.clientY; } document.addEventListener("click", printMousePos);결과화면
Element.getBoundingClientRect()
Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다.
domRect = element.getBoundingClientRect();
반환 값은 padding과 border-width를 포함해 전체 엘리먼트가 들어 있는 가장 작은 사각형인 DOMRect 객체입니다. left, top, right, bottom, x, y, width, height 프로퍼티는 전반적인 사각형의 위치와 크기를 픽셀 단위로 나타냅니다. width와 height가 아닌 다른 프로퍼티는 뷰포트의 top-left에 상대적입니다.
'Javascript' 카테고리의 다른 글
변수 type var, let, const의 장단점과 사용상 주의점 (0) 2023.03.05