• 코드:
​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
    <script>
9
        $(function() {
10
            $("button").on("click", function() {
11
                var str = "";
12
                str += "브라우저 뷰포트의 크기는 " + $(window).width() + "X" + $(window).height() + "입니다.<br>";
13
                str += "HTML 문서의 크기는 " + $(document).width() + "X" + $(document).height() + "입니다.";
14
                $("#text").html(str);
15
            });
16
        });
17
    </script>
18
</head>
19
​
20
<body>
21
​
22
    <h1>.width()와 .height() 메소드</h1>
23
    <button>브라우저 및 문서의 크기 정보</button>
24
    <p>브라우저의 크기를 조절해가며 위의 버튼을 눌러보세요!</p>
25
    <p id="text"></p>
26
27
</body>
28
​
29
</html>