Jquery[제이쿼리] height,width 배우기[브라우저,html]

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] height,width를 사용하여
윈도우창의 height,width값 
문서의 height,width값을 구해보도록하겠습니다.

위화면처럼 셋팅해주세요~

실행화면입니다. 이제 시작해볼까요.

===============================
var window_h =$(window).height();
var window_w =$(window).width();
alert("window_height ="+window_h+"  window_width ="+window_w);
===============================
window창의 height 값을 가지고와 window_h변수에 담아라
window창의 width 값을 가지고와 window_w변수에 담아라 입니당.
여기서 window의 값은 브라우저의 height,width값입니다.
창모드일때랑 아닐때랑 브라우저의 크기가 다르니까 다르게 나오겠죠?
그럼 alert()으로 값을 확인해보겠습니다.

위에있는 이미지의height값은 548 width 899 입니다 그럼 창크기를 좀더 키워보겠습니다.

이번에는 height값 712 width값 1072 입니다.  브라우저의 크기에따라 값이 변한답니다.!

===============================
var document_h =$(document).height();
var document_w =$(document).width();
alert("document_height ="+document_h+"  document_width ="+document_w);
===============================
document는 HTML문서의 크기의 height 값을 가지고와 document_h변수에 담아라
document는 HTML문서의 크기의 width 값을 가지고와 document_w변수에 담아라 입니당.
즉 실행을하여 스크롤바의 시작점부터 맨끝까지의 값입니다.

실행을하면 window_height값 547 window_ width값 895

document_height값 1500 document_ width값 895 입니다. 그럼 창을 늘려보겠습니다.

window_height값 847 window_ width값 873이고

document_height값 1500 document_ width값 873 입니다. 
창을 늘려도 document_height값은 1500값으로 고정되어있는걸 알수있습니다.
이유는 class이름이 div2에 보시면 height값이 1500인걸 알수있습니다.
document_height <==문서의 height값입니다. 잘기억하세요~

그럼 각각의 div에 click이벤트로 height,width을 확인해볼께요.
설명은 이제 생략할께요~

검정색 div의 클릭 했을때의 값입니다.

하늘색 div의 크릭 했을때의 값입니다.
오늘은 제이쿼리[jquery] height,width를 사용하여
윈도우창의 height,width값 
문서의 height,width값을 구해보았습니다.
그럼 다음에 또만나요~