[jQuery] .offset()

티스토리 뷰

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("함수") 메서드는 선택한 요소에 함수를 설정합니다.

샘플(Sample)

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

Sample1

속성(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>

샘플(Sample)

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

Sample1

속성(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>

샘플(Sample)

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

Sample1

속성(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>

공유하기(Share) 더보기

공감하기(Like) 더보기

태그(Tag) 더보기

.offset()

질문하기(Questions)

이전 1 ··· 435 436 437 438 439 440 441 442 443 ··· 563 다음

이전 다음

퍼블리셔와 디자이너를 위한 사이트입니다. 레퍼런스 사이트입니다.

HTML, CSS, JAVASCRIPT, JQUERY 레퍼런스 사이트입니다.

사이트는 현재 만드는 중입니다. 버그와 잘못된 링크가 엄청 많습니다.

현재는 베타버전입니다.

HTML 태그의 모든 것

티스토리 뷰

.offset()

.offset()

문법(Syntax)

정의(Definition)

샘플(Sample)

Sample1

속성(ATTRIBUTES)

jquery

html

Total

샘플(Sample)

Sample1

속성(ATTRIBUTES)

jquery

html

Total

샘플(Sample)

Sample1

속성(ATTRIBUTES)

jquery

html

Total

공유하기(Share) 더보기

공감하기(Like) 더보기

태그(Tag) 더보기

퍼블리셔와 디자이너를 위한 사이트입니다.
레퍼런스 사이트입니다.

사이트는 현재 만드는 중입니다.
버그와 잘못된 링크가 엄청 많습니다.