Front-end/JavaScript

윈도우 사이즈 구하기

본투비곰손 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