목차
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>
결과보기
