38. jquery Method [ .resize() ] - 웹브라우저 크기가 변할때 실행되는 메소드
2020. 2. 26. 15:55
38. jquery Method [ .resize() ] - 웹브라우저 크기가 변할때 실행되는 메소드
문법
.resize()
웹브라우저 크기가 변할때 실행되는 메소드
예를 들어
$(window).resize(function(){
a = $("#width").width();
b = $("#height").height();
$("#width").empty().append("width : "+a);
$("#height").empty().append("height : "+b);
})
웹브라우저의 사이즈가 변경될때 실행됩니다.
예제 코드
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Home</title>
<style type="text/css">
#width {
width: 60%;
margin: auto;
padding: 10px;
text-align: center;
border: 1px solid #bcbcbc;
}
#height {
width: 60%;
height: 60%;
margin: auto;
padding: 10px;
text-align: center;
border: 1px solid #bcbcbc;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
var a = $("#width").width();
var b = $("#height").height();
$("#width").append("width : "+a);
$("#height").append("height : "+b);
$(window).resize(function(){
a = $("#width").width();
b = $("#height").height();
$("#width").empty().append("width : "+a);
$("#height").empty().append("height : "+b);
})
});
</script>
<body>
<p id="width"></p>
<p id="height"></p>
</body>
</html>
실행 테스트
이 글을 공유합시다
