Chapter 08. 위치/크기 관련 기능 다루기. Lesson 02. 문서의 위치 및 크기 관련 기능

Chapter 08. 위치/크기 관련 기능 다루기. 

Lesson 02. 문서의 위치 및 크기 관련 기능

01. 소개

02. 핵심 내용

핵심 01. 문서 크기 구하기

사용법 : 

$(document).width()

$(document).height()

예제 01. 다음 실행화면처럼 현재 문서의 크기를 #info 영역에 출력해 주세요

<script>
$(document).ready(function()
{
    // 윈도우 크기가 변경되는 경우 발생하는 이벤트인 resize 이벤트 리스너를 showInfo() 함수 호출
  $(window).on("resize",function()
  {
      // 정보 출력
      showInfo();
  }) // 시작 시 화면에 문서 크기가 출력될 수 있게 showInfo() 함수를 호출해 줍니다.
    showInfo();
})
        
// 현재 showInfo() 함수를 이용해서 document 크기 정보 출력
function showInfo()
{
    var strInfo = "";
  strInfo += '$("document").width() = '+$(document).width()+"<br>";
  strInfo += '$("document").height() = '+$(document).height()+"<br>";
            
  $("#info").html(strInfo);
}
</script>