• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Element Position</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <style>
9
        #divBox { 
10
            width: 100px;
11
            height: 50px;
12
            border: 1px solid lightgray;
13
            margin: 10px;
14
            padding: 5px;
15
        }
16
        #para {
17
            font-weight: bold;
18
            margin-left: 15px;
19
        }
20
    </style>
21
    <script>
22
        $(function() {
23
            $("button").on("click", function() {
24
                var str = "";
25
                var offsetPosition = $("#para").offset();       // offset() 메소드를 사용해 id가 "para"인 요소의 위치 정보
26
                str += "offset() 메소드를 사용하여 구한 p 요소의 위치는<br>";
27
                str += "left가 " + offsetPosition.left + "픽셀이고, ";       // id가 "para"인 요소의 left 위치를 반환함.
28
                str += "top이 " + offsetPosition.top + "픽셀입니다.<br>"; // id가 "para"인 요소의 top 위치를 반환함.
29
                var posPosition = $("#para").position();        // position() 메소드를 사용해 id가 "para"인 요소의 위치 정보
30
                str += "position() 메소드를 사용하여 구한 p 요소의 위치는<br>";
31
                str += "left가 " + posPosition.left + "픽셀이고, ";          // id가 "para"인 요소의 left 위치를 반환함.
32
                str += "top이 " + posPosition.top + "픽셀입니다.";            // id가 "para"인 요소의 top 위치를 반환함.
33
                $("#text").html(str);
34
            });
35
        });
36
    </script>
37
</head>
38
​
39
<body>
40
​
41
    <div id="divBox">
42
        <p id="para">p 요소</p>
43
    </div>
44
    <button>요소의 위치 정보</button>
45
    <p id="text"></p>
46
    
47
</body>
48
​
49
</html>