상세 컨텐츠

본문 제목

윈도우 사이즈 구하기

Front-end/JavaScript

by 본투비곰손 2022. 11. 28. 22:48

본문

728x90
<div class="tag">Window Size</div>
    <script>
        const tag = document.querySelector('.tag') //DOM요소중 첫 .tag를 선택하여 변수 선언
        function updateTag() { //변수 tag에 좌표값을 대신 입력하는 함수 생성
            tag.innerHTML = `
            window.screen: ${window.screen.width},${window.screen.height} <br />
            window.outer: ${window.outerWidth},${window.outerHeight} <br />
            window.inner: ${window.innerWidth},${window.innerHeight} <br />
            documentElement.clientWidth: ${document.documentElement.clientWidth},${document.documentElement.clientHeight}
            `
        }
        
        window.addEventListener('resize',() => {  //창의 크기가 변할때마다 함수를 호출해서 값을 바꿔준다.
            updateTag()            
        })
        updateTag()//처음부터 updateTag함수를 통해 좌표를 나타내주고
        
    </script>

창의 크기가 변할때 마다 콘솔창에 변화된 창의 크기를 나타내준다.

728x90

'Front-end > JavaScript' 카테고리의 다른 글

(기초) 제어문  (0) 2023.01.05
(기초) 연산자  (0) 2023.01.04
(기초) 변수 타입  (0) 2023.01.04
브라우저 좌표 구하기  (0) 2022.11.28

관련글 더보기