본문 바로가기

Webstoryboy

Category

Explanation

JQUERY/Alphabet

offset()

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
여기에 결과값이 표시됩니다.
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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
offset() jQeury 1.x 버전
jQeury 2.x 버전
jQeury 3.x 버전

참고 사이트(Reference)


Tag

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기

질문하기