자바스크립트 이용 브라우저 화면 크기 알아보기
자바스크립트 이용 브라우저 화면 크기 알아보기
jQuery를 활용하지 않고 자바스크립트를 사용하여 열려있는 브라우저 화면의 사이즈(너비, 높이)를 현재 크기 또는 실시간 변경되는 크기를 알 수 있습니다.
winndow 객체(object)의 속성과 이벤트 요소를 사용하여
현재 열려있는 창의 크기를 알아보겠습니다.
winndow 객체(object)의 속성을 사용
1. 내용(content)화면
● window.innerWidth
● window.innerHeight
2.전체화면(툴바, 스크롤바 포함)
● window.outerWidth
● window.outerHeight
※위의 속성은 인터넷 익스플로러는 9.0 이상만 지원합니다.
인터넷 익스플로러 하위 버전에서 1번 내용화면은
document 오브젝트의
document.documentElement.clientWidth 또는 document.body.clientWidth
document.documentElement.clientHeight 또는 document.body.clientHeight 속성을 사용합니다.
위의 속성을 사용하여 현재 화면의 크기를 알아보겠습니다.
클릭하면 위의 박스에 브라우저 화면 크기가 표시됩니다. 브라우저 사이즈를 변경하고 클릭하면 변경된 크기가 표시됩니다.
★참조 웹페이지: https://www.w3schools.com/jsref/prop_win_innerheight.asp
▶innerWidth, innerHeight, outerWidth, outerHeight를 이미지로 표시했습니다.
resize 이벤트를 활용 실시간으로 변경 사이즈 표시 예제.
1. body 테그에 onresize 이벤트 적용
<body onresize="myFunction()">
2. document body 태그의 이벤트를 가져옴
document.getElementsByTagName("BODY")[0].onresize = function() {myFunction()};
3. windoe object에 event handler 접속
window.addEventListener("resize", myFunction);
☆addEventListener METHOD는 인터넷 익스플로러는 9.0 이상만 지원합니다.
※size를 표시하는 window object 속성 innerWidth, innerHeight, outerWidth, outerHeight를 그대로 사용합니다.
브라우저 사이즈를 변경하면 실시간으로 화면 크기가 표시됩니다.
★참조 웹페이지: https://www.w3schools.com/jsref/event_onresize.asp