목차
- resize 예제 - 윈도우창 크기변동 시, 윈도우창 크기 반환
- resize 정의
- resize 구문
- resize 예제 - 창크기 조정 횟수
resize 예제 - 윈도우창 크기변동 시, 윈도우창 크기 반환
<body onresize="homzzang()">
<p id="demo"></p>
<script>
function homzzang() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
결과보기
※ 주의: IE9 미만 브라우저는 outerWidth/outerHeight 지원 X
resize 정의
윈도우창 크기 조정되면 이벤트 발생.
1. 요소 크기 관련 속성
2.
모든 브라우저 모두 지원.
3.
- 이벤트확산: X
- 취소가능성: X
- 이벤트타입: 사용자 인터페이스에서 생성되면 UiEvent, 그렇지 않으면 Event.
- 지원 HTML: <body>
- DOM 버전: Level 2 Events
resize 구문
[HTML 속성 방식]
<element onresize="homzzang()">
[JS 속성 방식]
object.onresize = function(){homzzang()};
[JS 메서드 방식]
object.addEventListener("resize", homzzang);
PS.
※ homzzang : 실행함수명. (※ 실행코드 직접 입력 가능)
※ addEventLister() 방식 주의사항 2가지
- 이벤트명에 on 안 붙임.
- 실행함수명 뒤에 소괄호 안 붙임.
※ addEventListener() 메서드는 IE9 이상 지원.
resize 예제 - 창크기 조정 횟수
<p>Window창 크기조정 횟수 : <span id="demo">0</span> 회</p>
<script>
window.addEventListener("resize", homzzang);
var x = 0;
function homzzang() {
var txt = x += 1;
document.getElementById("demo").innerHTML = txt;
}
</script>
결과보기
