티스토리 뷰

(기초)그래서 뭘 배운거야?/jQuery

JQ-17-객체조작메서드(offset / position)

Soheny.P 2021. 10. 14. 09:43
728x90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/JS/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box_wrap {
            width: 300px;
            height: 200px;
            margin: 50px auto 0;
            position: relative;
            background-color: #ccc;
        }

        .box {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 100px;
            top: 50px;
            background-color: rebeccapurple;
        }
    </style>
</head>

<body>
    <!--    
            * offset() : 수평, 수직으로 얼마나 떨어져있는지 절대값
            * position() : 포지션의 위치값을 반환하는 상대값 

    -->
    
    <div id="box_wrap">
        <p class="box">박스</p>
    </div>

    <p class="txt_1">Top의 절대위치값 : <span></span></p>
    <p class="txt_2">Top의 상대위치값 : <span></span></p>


    <script>
        $(function () {
            // 변수명 앞에 $표시해 객체임을 알려주기
            let $txt1 = $(".txt_1 span");
            let $txt2 = $(".txt_2 span");
            let $box = $(".box");

            let offset_txt = $box.offset().top;
            let position_txt = $box.position().top;

            $txt1.text(offset_txt); //100
            $txt2.text(position_txt); //50

        });
    </script>
</body>

</html>

728x90
저작자표시 비영리 변경금지 (새창열림)

'(기초)그래서 뭘 배운거야? > jQuery' 카테고리의 다른 글

JQ-18-객체조작메서드(scrollTop)  (0) 2021.10.14
JQ-16-객체조작메서드(width / height)  (0) 2021.10.14
JQ-15-객체조작메서드(val / prop)  (0) 2021.10.13
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함