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