[jquery] 윈도우또는 객체의 크기 확인방법

가끔 html을 작성하다보면 어느 객체의 크기에 따라 동작을 다르게 해야하는 경우가 생깁니다.

그럴 경우에는 css의 미디어를 이용해도 되지만 jquery를 통해서도 비슷한 효과를 줄 수 있습니다.

 

특히 jquery에서는 특정 객체의 크기를 아주 손쉽게 가져올 수 있습니다.

jquery에서 객체의 크기를 가져오는 방법은 다음과 같습니다.

 

$(객체).width();

$(객체).height();

 

여기서 객체라는 것은 ".클래스명" 또는 "#아이디", (document), (window) 등을 의미합니다.

다만 중복해서 객체를 반환할 수 있는 클래스명 같은 경우에는 따로 지정해주지 않는 경우에는 가장 첫번째 객체를 기준으로 값을 얻을 수 있습니다.

또한, 얻을 수 있는 값은 padding 등의 여백을 제외한 순수 크기만 반환됩니다.

 

jquery를 이용하여 크기에 맞춰 동작을 다르게 하기 위해서는 다음과 같은 코드를 작성하시면 됩니다.

 

var window_width = $(window).width();
var window_height = $(window).height();

if(window_width >= 500 && window_height >= 300)
{
	console.log("크기 충족!");
}
else
{
	console.log("크기 부족!");
}