티스토리 뷰

jQuery

[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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
offset() jQeury 1.x 버전 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
jQeury 2.x 버전 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
jQeury 3.x 버전 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼
1 ··· 521 522 523 524 525 526 527 528 529 ··· 649