• 코드:
​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
        }
15
        #para {
16
            font-weight: bold;
17
            margin-top: 15px;
18
        }
19
    </style>
20
    <script>
21
        $(function() {
22
            $("button").on("click", function() {
23
                $("#para").offset({ top: 200, left: 100 });     // id가 "para"인 요소의 위치를 설정함.
24
                var paraPosition = $("#para").offset();         // id가 "para"인 요소의 위치 정보를 저장함.
25
                var str = "p 요소의 위치는<br>";
26
                str += "left가 " + paraPosition.left + "픽셀이고, "; // id가 "para"인 요소의 left 위치를 반환함.
27
                str += "top이 " + paraPosition.top + "픽셀입니다.";       // id가 "para"인 요소의 top 위치를 반환함.
28
                $("#text").html(str);
29
            });
30
        });
31
    </script>
32
</head>
33
​
34
<body>
35
​
36
    <div id="divBox">
37
        <p id="para">p 요소</p>
38
    </div>
39
    <button>요소의 위치 변경</button>
40
    <p id="text"></p>
41
42
</body>
43
​
44
</html>