브라우저 좌표 구하기

Front-end/JavaScript

by 본투비곰손 2022. 11. 28. 23:16

728x90

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="special"></div>
    <div></div>
    <div></div>
    <script>
        const special = document.querySelector('.special'); //변수를 선언한다
        special.addEventListener('click', (event) => { //클릭시 이벤트를 나타내고
            const rect = special.getBoundingClientRect(); //이벤트에서 받는 값을 변수로 선언한다.
            console.log(rect); 받아오는 모든 값을 나타낸다.
            console.log(`client: ${event.clientX}, ${event.clientY}`); 
            //받아온 값에서 내가보는 화면 기준의 x,y 좌표값을 출력한다.
            console.log(`page: ${event.pageX}, ${event.pageY}`);
            //받아온 값에서 전체 화면 기준의 x,y 좌표값을 출력한다.
        })
    </script>
</body>

728x90