jQuery를 이용해 DOM의 크기 얻기

아래와 같은 Visual DOM 객체가 있다고 하자. jQuery를 이용해 이 객체의 가로와 세로에 대한 픽셀 크기를 얻는 코드에 대해 정리해 봅니다.

Visual DOM 객체는 눈에 보이는 것, 즉 본래의 모양과 외곽선(Border) 이외에도 Padding과 Margin와 같은 보이지 않지만 활용에서 유용한 속성을 갖는다. 아래의 그림을 보면..

위의 그림은 w3schools.com에서 jQuery 튜토리얼에서 가져온 그림입니다.

그림에서 함수는 jQuery에서 얻는 DOM 객체에 대한 것입니다. 정리를 하면 아래와 같습니다.

width(), height() ㅡ Padding, Border, Margin을 제외한 크기
innerWidth(), innerHeight() ㅡ Border, Margin을 제외한 크기
outerWidth(), outerHeight() ㅡ Margin을 제외한 크기
outerWidth(true), outerHeight(true) ㅡ Padding, Border, Margin을 모두 포함한 크기

특히나 위의 width와 height 함수는 크기를 얻는(get) 기능을 하면서도 인자를 받으면 해당 인자의 값만큼 크기를 설정하는(set) 기능도 갖습니다.

이제 이 글의 맨 앞에서 보인 DOM 객체(ID가 div1임)에 대한 스타일을 살펴봄으로써 Border, Padding, Margin의 값을 살펴볼 수 있습니다.

#div1 {
    height: 100px;
    width: 300px;
    padding: 10px;
    margin: 3px;
    border: 2px solid blue;
    background-color: lightblue;
}

ID가 div1인 div를 jQuery로 얻어 그 크기 몇가지를 얻는 코드는 아래와 같습니다.

$(document).ready(function () {
    $("button").click(function () {
        var div = $("#div1");
        var txt = "";

        txt += "Width of div: " + div.width() + "
";
        txt += "Height of div: " + div.height() + "
";
        txt += "Outer width of div (margin included): " 
            + div.outerWidth(true) + "
";
        txt += "Outer height of div (margin included): " 
            + div.outerHeight(true);

        div.html(txt);
    });
});

실행하고 이벤트가 설정된 버튼을 클릭하면 아래와 같은 결과를 살펴볼 수 있습니다.

참고로 위의 예제에서 사용한 body 부분의 DOM 구성 코드는 아래와 같습니다.


    >/div>

답글 남기기 응답 취소