• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Element Dimension</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <style>
9
        #divBox {
10
            width: 400px;
11
            height: 110px;
12
            border: 5px solid orange;
13
            padding: 10px;
14
            margin: 15px;
15
        }
16
    </style>
17
    <script>
18
        $(function() {
19
            $("button").on("click", function() {
20
                var str = "이 div 요소의 ";
21
                // id가 "divBox"인 요소의 크기를 반환함.
22
                str += "크기는 " + $("#divBox").width() + "X"
23
                    + $("#divBox").height() + "이고,<br>";
24
                // id가 "divBox"인 요소의 패딩 영역을 포함한 크기를 반환함.
25
                str += "패딩 영역을 포함한 크기는 " + $("#divBox").innerWidth() + "X"
26
                    + $("#divBox").innerHeight() + "이고,<br>";
27
                // id가 "divBox"인 요소의 패딩 영역과 테두리를 포함한 크기를 반환함.
28
                str += "테두리까지 포함한 크기는 " + $("#divBox").outerWidth() + "X"
29
                    + $("#divBox").outerHeight() + "이고,<br>";
30
                // id가 "divBox"인 요소의 패딩 영역과 테두리, 마진 영역까지 포함한 크기를 반환함.
31
                str += "마진 영역까지 포함한 크기는 " + $("#divBox").outerWidth(true) + "X"
32
                    + $("#divBox").outerHeight(true) + "입니다.";
33
                $("#text").html(str);
34
            });
35
        });
36
    </script>
37
</head>
38
​
39
<body>
40
​
41
    <h1>다양한 크기 정보를 반환하는 메소드</h1>
42
    <div id="divBox">
43
        <p id="text"></p>
44
    </div>
45
    <button>요소의 크기 정보</button>
46
47
</body>
48
​
49
</html>