• 코드:
​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: 300px;
11
            height: 100px;
12
            border: 2px solid orange;
13
        }
14
    </style>
15
    <script>
16
        $(function() {
17
            $("button").on("click", function() {
18
                var str = "이 div 요소의 ";
19
                str += "너비는 " + $("#divBox").width() + "픽셀이고,<br>"; // id가 "divBox"인 요소의 너비를 반환함.
20
                str += "높이는 " + $("#divBox").height() + "픽셀입니다."    // id가 "divBox"인 요소의 높이를 반환함.
21
                $("#text").html(str);
22
            });
23
        });
24
    </script>
25
</head>
26
​
27
<body>
28
​
29
    <h1>.width()와 .height() 메소드</h1>
30
    <div id="divBox">
31
        <p id="text"></p>
32
    </div>
33
    <br>
34
    <button>요소의 크기 정보</button>
35
36
</body>
37
​
38
</html>