position() / offset()

요소 위치 메서드에는 position() 메서드와 offset() 메서드가 있습니다. position() 메서드는 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용합니다. offset() 메서드는 문서를 기준으로 선택한 요소의 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변환하거나 변경할 때

$("선택자").position().left; $("선택자").position().right; $("선택자").position().top; $("선택자").position().bottom;

$("선택자").offset().left; $("선택자").offset.top;

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <style>
        div {background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); line-height: 40px; text-align: center;}
        .circle1 {width: 40px; height: 40px; border-radius: 50%; position: absolute; left: 100px; top: 400px;}
        .circle2 {width: 40px; height: 40px; border-radius: 50%; position: absolute; right: 100px; bottom: 400px;}
    </style>
</head>
<body>

    <div class="circle1">1</div>
    <div class="circle2">2</div>

    <button class="btn1">circle1</button>
    <button class="btn2">circle2</button>

    <ul>
        <li><span>position().left : </span><span class="pl">0</span></li>
        <li><span>position().top : </span><span class="pt">0</span></li>
        <li><span>position().bottom : </span><span class="pb">0</span></li>
        <li><span>position().right : </span><span class="pr">0</span></li>
        <li><span>offset().left : </span><span class="ol">0</span></li>
        <li><span>offset().top : </span><span class="ot">0</span></li>
        <li><span>width() : </span><span class="wi">0</span></li>
        <li><span>height() : </span><span class="he">0</span></li>
    </ul>

    <!-- script -->
    <script src="jquery.min_1.12.4.js"></script>
    <script>
       $(".btn1").click(function(){
           const pl = $(".circle1").position().left;
           const pt = $(".circle1").position().top;
           const pb = $(".circle1").position().bottom;
           const pr = $(".circle1").position().right;
           const ol = $(".circle1").offset().left;
           const ot = $(".circle1").offset().top;
           const wi = $(".circle1").width();
           const he = $(".circle1").height();

           $(".pl").text(parseInt(pl));
           $(".pt").text(parseInt(pt));
           $(".pb").text(parseInt(pb));
           $(".pr").text(parseInt(pr));
           $(".ol").text(parseInt(ol));
           $(".ot").text(parseInt(ot));
           $(".wi").text(parseInt(wi));
           $(".he").text(parseInt(he));
       });

       $(".btn2").click(function(){
           const pl = $(".circle2").position().left;
           const pt = $(".circle2").position().top;
           const pb = $(".circle2").position().bottom;
           const pr = $(".circle2").position().right;
           const ol = $(".circle2").offset().left;
           const ot = $(".circle2").offset().top;
           const wi = $(".circle2").width();
           const he = $(".circle2").height();

           $(".pl").text(parseInt(pl));
           $(".pt").text(parseInt(pt));
           $(".pb").text(parseInt(pb));
           $(".pr").text(parseInt(pr));
           $(".ol").text(parseInt(ol));
           $(".ot").text(parseInt(ot));
           $(".wi").text(parseInt(wi));
           $(".he").text(parseInt(he));
       });
    </script>
</body>
</html>
<script>
        $(function(){
            let $txt1 = $(".txt_1 span"),
                $txt2 = $(".txt_2 span"),
                $box = $(".box");

            let off_t = $box.offset().top;
            let pos_t = $box.position().top;

            $txt1.text(off_t);
            $txt2.text(pos_t);
        });
    </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: #f00;}
    </style>
</head>
<body>
    <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>
</body>
Previous속성NextscrollTop() / scrollLeft()

Last updated

Was this helpful?