offset()

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

offset()

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

특징	설명
버전(version)	1.x
결과값(return)	문자열(string)
사용성	★★★★★

문법(Syntax)

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

//속성 값을 가져오는 경우
$("div").offset();

//속성 값을 가져오는 경우
$("div").offset().top;

//속성 값을 가져오는 경우
$("div").offset().left;

//속성 값을 변경하는 경우
$("div").offset({ top: 100, left: 100 });

//콜백함수를 사용하는 경우
$("div").offset(function(){});

선택자(selector) : 선택자를 설정합니다.
속성 값(attribute value) : 속성 값을 설정합니다.
함수(function) : 콜백 함수를 설정합니다.

정의(Definition)

offset() 메서드는 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.
offset() 메서드는 문서의 시작점 (0, 0)으로부터 위치 값을 가져오고, position() 메서드는 기준점(position:relative)으로 부터 위치 값을 가져옵니다.
offset().top 메서드는 선택한 요소에 Y축 좌표 값을 가져옵니다.
offset().left 메서드는 선택한 요소에 X축 좌표 값을 가져옵니다.
offset({ top: "속성값", left: "속성값" }) 메서드는 선택한 요소에 X축, Y축 좌표로 변경합니다.
offset("함수") 메서드는 선택한 요소에 콜백 함수를 설정합니다.

위치와 관련된 메서드(Position Related method)

offset() 메서드는 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.
position() 메서드는 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다.
scrollLeft() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다.
scrollTop() 메서드는 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.

비교(Compare) : Javascript

clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.
offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다.
getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.

예제1(Sample)

버튼을 클릭하면 박스의 위치 값을 가져오는 예제입니다.

width: 400px
margin: 20px
border: 2px
padding: 20px

여기에 결과값이 표시됩니다.

버튼을 클릭하면 offset().top 값이 표시됩니다. 버튼을 클릭하면 offset().left 값이 표시됩니다. 버튼을 클릭하면 position().top 값이 표시됩니다. 버튼을 클릭하면 position().left 값이 표시됩니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div class="box">
        <span>
            width: 400px<br>
            margin: 20px<br>
            border: 2px<br>
            padding: 20px<br>
        </span>
    </div>
    <div class="desc">여기에 결과값이 표시됩니다.</div>
</div>

.jsample {
    text-align: center;
}
.jsample .box {
    margin: 20px auto;
    width: 400px;
    height: 200px;
    background-color: #f9f2f4;
    border: 2px solid #a51a3d;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jsample .box::before {
    content: '';
    width: 358px;
    height: 158px;
    border: 1px dashed #a51a3d;
    position: absolute;
    left: 20px; top: 20px;
}
.jsample .box::after {
    content: '';
    width: 440px;
    height: 240px;
    border: 1px dashed #a51a3d;
    position: absolute;
    left: -21px; top: -21px;
}
.jsample .box span {
    color: #c7254e;
}
.jsample .desc {
    padding-top: 10px;
}

const box = $("#sample1 .jsample > div");

    $("#sample1 .btn1").click(function(e){
        e.preventDefault();
        $("#sample1 .jsample .desc").text("이 박스의 top값은 " + box.offset().top + "px 입니다.");
    });
    $("#sample1 .btn2").click(function(e){
        e.preventDefault();
        $("#sample1 .jsample .desc").text("이 박스의 left값은 " + box.offset().left + "px 입니다.");
    });
    $("#sample1 .btn3").click(function(e){
        e.preventDefault();
        $("#sample1 .jsample .desc").text("이 박스의 top값은 " + box.position().top + "px 입니다.");
    });
    $("#sample1 .btn4").click(function(e){
        e.preventDefault();
        $("#sample1 .jsample .desc").text("이 박스의 left값은 " + box.position().left + "px 입니다.");
    });

예제2(Sample)

원을 드래그 하면 위치 값을 가져오는 예제입니다.

drag

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

원을 드래그 하면 위치값이 표시됩니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div class="circle">drag</div>
    <div class="desc">
        offset().left : <span class="d1">0</span><br>
        offset().top : <span class="d2">0</span><br>
        position().left : <span class="d3">0</span><br>
        position().top : <span class="d4">0</span>
    </div>
</div>

#sample2 .jsample {
    min-height: 300px;
    position: relative;
}
#sample2 .jsample .circle {
    width: 100px;
    height: 100px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 50%;
    border: 1px dashed #a51a3d;
    line-height: 100px;
}
#sample2 .jsample .desc {
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: left;
}

const circle = $("#sample2 .jsample .circle");

circle.draggable({
    drag:function(){
        $('#sample2 .desc .d1').text( circle.offset().left + "px");
        $('#sample2 .desc .d2').text( circle.offset().top + "px");
        $('#sample2 .desc .d3').text( circle.position().left + "px");
        $('#sample2 .desc .d4').text( circle.position().top + "px");
    }
});

호환성(Compatibility)

							6	7	8	9	10	11
offset()	jQeury 1.x 버전	○	○	○	○	○	○	○	○	○	○	○	○	○	○
	jQeury 2.x 버전	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○
	jQeury 3.x 버전	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○