728x90 300x250 SMALL javaScript/jQuery148 윈도우 리사이즈 이벤트 처리 resize resize 이벤트는 윈도우 사이즈가 변경될때 window 객체에서 발생하는 이벤트이다. $(window).on("resize",function(e){ }); 윈도우 크기가 변경될 경우 현재 윈도우 크기 콘솔창에 나타내기 $(window).on("resize",function(e){ var w = window.outerWidth; var h = window.outerHeight; console.log(`width=${w}, height=${h}`) }); 2023. 4. 16. 윈도우 크기 설정하기(resizeTo) resizeTo() window.resizeTo(width,height) Window객체에서 제공하는 resizeTo() 메서드를 이용하면 윈도우 크기를 변경할 수 있다. 하지만 이 메서드는 window.open()메서드에 의해서 만들어진 윈도우만 크기를 변경할 수 있다. 즉 현재 윈도우 크기 변경은 안된다. 생성 버튼을 클릭하면 윈도우가 생성되고 크기변경 버튼을 누르면 너비 200~600 / 높이 200~500 사이의 랜덤값으로 윈도우 창 크기가 변경 된다. 하지만 현재 창은 변경이 안됨 생성 크기변경 2023. 4. 15. 윈도우 크기 구하기(window) 윈도우(웹 브라우저 창) 크기를 구하기 전에 아래 이미지를 먼저 확인해 보자 이미지 처럼 윈도우 크기는 기본크기에 메뉴바 + 툴바 + 스크롤바가 포함되는지 여부에 따라서 다양하다. 기본 크기 구하기 window.innerWidth window.innerHeight 웹브라우저 창의 메뉴바와 툴바 스크롤바 등이 포함되지 않은 윈도우 내부영역 크기 기본 크기 + 메뉴바 + 툴바 영역이 포함된 크기 $(window).width() $(window).height() 기본크기 + 메뉴바 + 툴바 + 스크롤바 영역이 포함된 크기 window.outerWidth window.outerHeight 이미지 출처 : https://plantpot.works/4173 2023. 4. 14. 윈도우 크기 변경 (resize) 될 때마다 크기 정보 가져오기 (document).ready(function(){ $(window).on("resize",function(){ size(); }) size(); }) function size(){ var w = $(document).width(); var h = $(document).height(); $("#info").html(`width = ${w}, height = ${h}`); } 2023. 4. 12. 이전 1 ··· 10 11 12 13 14 15 16 ··· 37 다음 728x90 반응형 LIST