.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
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
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 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
