Blog Content

    티스토리 뷰

    45.jQuery - margin을 포함한 높이와 너비 구하기 ( 06.CSS )

    반응형
    margin(마진)을 포함한 높이와 너비 구하는 예제입니다.

    마진(margin) : 사각형을 그리는데 사각형 모양을 포함하고 있는 테두리, 영역등 포함

    02.OuterWidthAndHeight.htm

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>검색된 요소의 크기 구하기</title>

        <style type="text/css">

            #my

            {

                background-color : Yellow; border:2px solid gray; position:absolute;

                         padding:10px; z-index:0px; margin:10px;

                         top:50px; left:50px;

                         width:200px; height:200px;

            }

        </style><!--절대좌표 지정-->

       

        <script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(document).ready(function() {

            $('#btnSize').click(function() {

                    //outerHeight() : 마진을 제외한 영역의 크기

                    alert("outerHeight : " + $('#my').outerHeight());

                   

                    //outrHeight(true) : 마진을 포함한 영역의 크기

                    alert("outerHeight(true) : " + $('#my').outerHeight(true));

                   

                    //outerWidth() : 마진을 제외한 영역의 크기

                    alert("outerWidth : " + $('#my').outerWidth());

     

                    //outerWidth(true) : 마진을 포함한 영역의 크기

                    alert("outerWidth(ture) : " + $('#my').outerWidth(true));

                    });

            });

        </script>   

    </head>

    <body>

        <div id="my">

                <p>jQuery</p>

                <p>Ajax</p>

        </div>

       

        <input type="button" id="btnSize" value=" 영역의 크기 구하기" />   

    </body>

    </html>


    결과화면

    [그림45-1]



    반응형

    Comments