[jQuery] .offset()

.offset()

선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.

.offset()

선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.

문법(Syntax)

$("선택자").offset();
$("선택자").offset().top;
$("선택자").offset().left;
$("선택자").offset({ top: "속성값", left: "속성값" })
$("선택자").offset("함수");

정의(Definition)

.offset() 메서드는 선택한 요소에 좌표 값을 가져옵니다.
.offset().top 메서드는 선택한 요소에 Y축 좌표 값을 가져옵니다.
.offset().left 메서드는 선택한 요소에 X축 좌표 값을 가져옵니다.
.offset({ top: "속성값", left: "속성값" }) 메서드는 선택한 요소에 X축. Y축 좌표로 변경합니다.
.offset("함수") 메서드는 선택한 요소에 함수를 설정합니다.

Sample1

.position() : 원의 x축, y축 좌표값을 알아내는 예제입니다. 기준점을 통해 좌표값을 출력합니다.

결과

속성(ATTRIBUTES)

circle

offset().left = 0
offset().top = 0
position().left = 0
position().top = 0

리셋
클릭하면 원의 .offset() left 좌표값을 표현합니다. 클릭하면 원의 .offset() top 좌표값을 표현합니다.
클릭하면 원의 .position() left 좌표값을 표현합니다. 클릭하면 원의 .position() top 좌표값을 표현합니다.

jquery

$(".choice1 .btn1").click(function(e){
    e.preventDefault();
    $(".list1 .desc .ol").text( $(".list1 .circle").offset().left + "px" );
});
$(".choice1 .btn2").click(function(e){
    e.preventDefault();
    $(".list1 .desc .ot").text( $(".list1 .circle").offset().top + "px" );
});
$(".choice1 .btn3").click(function(e){
    e.preventDefault();
    $(".list1 .desc .pl").text( $(".list1 .circle").position().left + "px" );
});
$(".choice1 .btn4").click(function(e){
    e.preventDefault();
    $(".list1 .desc .pt").text( $(".list1 .circle").position().top + "px" );
});

html

<h3>속성(ATTRIBUTES)</h3>
<div class="list1">
    <div class="circle">circle</div>
    <p class="desc">
        <span>offset().left = </span><span class="ol">0</span><br>
        <span>offset().top = </span><span class="ot">0</span><br>
        <span>position().left = </span><span class="pl">0</span><br>
        <span>position().top = </span><span class="pt">0</span><br>
    </p>
</div>

Total

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .circle {width: 100px; height: 100px; color: #c7254e; background-color: #f9f2f4; border-radius: 50%; border: 1px dashed #a51a3d; text-align: center; line-height: 100px;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>속성(ATTRIBUTES)</h3>
    <div class="list1">
        <div class="circle">circle</div>
        <p class="desc">
            <span>offset().left = </span><span class="ol">0</span><br>
            <span>offset().top = </span><span class="ot">0</span><br>
            <span>position().left = </span><span class="pl">0</span><br>
            <span>position().top = </span><span class="pt">0</span><br>
        </p>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a><br>
        <a href="#" class="btn1">클릭하면 원의 .offset() <em>left</em> 좌표값을 표현합니다.</a>
        <a href="#" class="btn2">클릭하면 원의 .offset() <em>top</em> 좌표값을 표현합니다.</a><br>
        <a href="#" class="btn3">클릭하면 원의 .position() <em>left</em> 좌표값을 표현합니다.</a>
        <a href="#" class="btn4">클릭하면 원의 .position() <em>top</em> 좌표값을 표현합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").click(function(e){
            e.preventDefault();
            $(".list1 .desc").text("");
        });
        $(".choice1 .btn1").click(function(e){
            e.preventDefault();
            $(".list1 .desc .ol").text( $(".list1 .circle").offset().left + "px" );
        });
        $(".choice1 .btn2").click(function(e){
            e.preventDefault();
            $(".list1 .desc .ot").text( $(".list1 .circle").offset().top + "px" );
        });
        $(".choice1 .btn3").click(function(e){
            e.preventDefault();
            $(".list1 .desc .pl").text( $(".list1 .circle").position().left + "px" );
        });
        $(".choice1 .btn4").click(function(e){
            e.preventDefault();
            $(".list1 .desc .pt").text( $(".list1 .circle").position().top + "px" );
        });
    </script>

</body>
</html>

Sample2

.position() : 원의 x축, y축 좌표값을 알아내는 예제입니다. jQuery UI 드래그 기능을 통해 좌표값을 출력합니다.

결과

속성(ATTRIBUTES)

circle

offset().left = 0
offset().top = 0
position().left = 0
position().top = 0

원을 드래그 하면 원의 좌표값을 표현합니다.

jquery

$('.list2 .circle').draggable({
    drag:function(){
        $('.desc .ol').text( $('.circle').offset().left + "px");
        $('.desc .ot').text( $('.circle').offset().top + "px");
        $('.desc .pl').text( $('.circle').position().left + "px");
        $('.desc .pt').text( $('.circle').position().top + "px");
    }
});

html

<h3>속성(ATTRIBUTES)</h3>
<div class="list2">
    <div class="circle">circle</div>
    <p class="desc">
        <span>offset().left = </span><span class="ol">0</span><br>
        <span>offset().top = </span><span class="ot">0</span><br>
        <span>position().left = </span><span class="pl">0</span><br>
        <span>position().top = </span><span class="pt">0</span><br>
    </p>
</div>

Total

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .circle {width: 100px; height: 100px; color: #c7254e; background-color: #f9f2f4; border-radius: 50%; border: 1px dashed #a51a3d; text-align: center; line-height: 100px;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>속성(ATTRIBUTES)</h3>
    <div class="list2">
        <div class="circle">circle</div>
        <p class="desc">
            <span>offset().left = </span><span class="ol">0</span><br>
			<span>offset().top = </span><span class="ot">0</span><br>
            <span>position().left = </span><span class="pl">0</span><br>
            <span>position().top = </span><span class="pt">0</span><br>
        </p>
    </div>
    
    <div class="choice2">
        <a href="#c">원을 드래그 하면 원의 좌표값을 표현합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $('.list2 .circle').draggable({
            drag:function(){
                $('.desc .ol').text( $('.circle').offset().left + "px");
                $('.desc .ot').text( $('.circle').offset().top + "px");
                $('.desc .pl').text( $('.circle').position().left + "px");
                $('.desc .pt').text( $('.circle').position().top + "px");
            }
        });
    </script>

</body>
</html>

Sample3

.offset({ top: "속성값", left: "속성값" }): 요소의 좌표 값을 변경하는 예제입니다. 클릭하면 원이 사라집니다. 문서를 기준으로 이동하기 때문에 상단으로 가시면 원이 보입니다.

결과

속성(ATTRIBUTES)

circle

클릭하면 원의 좌표를 top: 70px, left: 200px으로 이동합니다. 클릭하면 원의 좌표를 top: 100px, left: 400px으로 이동합니다.

jquery

$(".choice3 .btn1").click(function(e){
    e.preventDefault();
    $(".list3 .circle").offset({ top: 70, left: 200 });
});
$(".choice3 .btn2").click(function(e){
    e.preventDefault();
    $(".list3 .circle").offset({ top: 100, left: 400 });
});

html

<h3>속성(ATTRIBUTES)</h3>
<div class="list3">
    <div class="circle">circle</div>
    <p class="desc"></p>
</div>

Total

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .circle {width: 100px; height: 100px; color: #c7254e; background-color: #f9f2f4; border-radius: 50%; border: 1px dashed #a51a3d; text-align: center; line-height: 100px;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>속성(ATTRIBUTES)</h3>
    <div class="list3">
        <div class="circle">circle</div>
        <p class="desc"></p>
    </div>
    
    <div class="choice3">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 원의 좌표를 top: 70, left: 200으로 이동합니다.</a>
        <a href="#" class="btn2">클릭하면 원의 좌표를 top: 100, left: 400으로 이동합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice3 .off1").click(function(e){
            e.preventDefault();
            $(".list3 .circle").offset();
        });
        $(".choice3 .btn1").click(function(e){
            e.preventDefault();
            $(".list3 .circle").offset({ top: 70, left: 200 });
        });
        $(".choice3 .btn2").click(function(e){
            e.preventDefault();
            $(".list3 .circle").offset({ top: 100, left: 400 });
        });
    </script>

</body>
</html>

호환성(Compatibility)

메서드	버전						6	7	8	9	10	11
offset()	jQeury 1.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 2.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 3.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능