jQuery - Dimensions
jQuery를 사용하면 요소와 브라우저 창의 크기(dimensions, 치수)에 대해 쉽게 작업할 수 있습니다.

jQuery에는 크기에 대한 작업을 위한 몇 가지 중요한 방법이 있습니다.

• width()
• height()
• innerHeight()
• outerWidth()
• outerHeight()

width() 메서드는 요소의 너비를 설정하거나 반환합니다 (padding, border 및 margin 제외).

height() 메서드는 요소의 높이를 설정하거나 반환합니다 (padding, border 및 margin 제외).

다음 예제는 지정된 <div> 요소의 너비와 높이를 반환합니다.

    $(document).ready(function () {
      $("button").click(function () {
        var txt = "";
        txt += "Width of div: " + $("#div1").width() + "<br>";
        txt += "Height of div: " + $("#div1").height();
        $("#div1").html(txt);
      });
    });

innerWidth() 메서드는 요소의 너비를 반환합니다(padding 포함).

innerHeight() 메서드는 요소의 높이를 반환합니다(padding 포함).

다음 예제는 지정된 <div> 요소의 내부 너비/높이(inner-width/height)를 반환합니다.

    $(document).ready(function () {
      $("button").click(function () {
        var txt = "";
        txt += "Width of div: " + $("#div1").width() + "</br>";
        txt += "Height of div: " + $("#div1").height() + "</br>";
        txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";
        txt += "Inner height of div: " + $("#div1").innerHeight();
        $("#div1").html(txt);
      });
    });

모든 jQuery HTML 메서드에 대한 전체 개요를 보려면, jQuery HTML/CSS Reference로 이동하십시오.