목차
- offset() 예제 - 오프셋 반환
- offset() 정의
- offset() 구문
- offset() 예제 - 이름:값 쌍으로 오프셋 설정
- offset() 예제 - 객체로 오프셋 설정
- offset() 예제 - 함수로 오프셋 설정
- offset() 예제 - 다른 요소의 오프셋으로 오프셋 설정
- offset() 예제 - 특정 offset 지점으로 이동
offset() 예제 - 오프셋 반환
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var hz = $("p").offset();
alert("Top: " + hz.top + " Left: " + hz.left);
});
});
</script>
</head>
<body>
<p>홈짱닷컴 Homzzang.com</p>
<button>p 요소 오프셋좌표 보기 (클릭)</button>
결과보기
offset() 정의
웹문서 기준으로 선택요소의 오프셋 설정하거나 반환
※ 오프셋 : 웹문서 좌측상단 구석부터 잰 top, left 좌표
1. 오프셋 반환 경우:
- 처음 매칭 (≒ 일치)하는 요소의 오프셋 반환.
- 해당 좌표는 px 단위로 표현된 top, left 좌표 속성 갖는 객체임.
2. 오프셋 설정 경우:
- 모든 매칭 (≒ 일치)하는 요소의 오프셋 반환.
offset() 구문
오프셋 반환
$(selector).offset()
오프셋 설정
$(selector).offset({top:value,left:value})
함수로 오프셋 설정
$(selector).offset(function(index,currentoffset))
[매개변수]
{top : value, left : value}
오프셋 설정 시 필요.
※ 위쪽/왼쪽 좌표를 픽셀 단위로 지정. (가능값 2종류)
- {top : 100, left : 100}과 같은 이름:값 구문. (예제1)
- top 및 left 속성 갖은 객체 (예제2)
function (index, currentoffset)
선택. top 및 left 좌표 포함 객체 반환 함수 지정. (예제3)
- index - 세트 안 요소의 인덱스 위치 반환.
- currentoffset - 선택요소의 현재 좌표 반환.
offset() 예제 - 이름:값 쌍으로 오프셋 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offset({top: 200, left: 200});
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<button>요소 오프셋 재설정 (클릭)</button>
결과보기
offset() 예제 - 객체로 오프셋 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
hz = new Object();
hz.left = "0";
hz.top = "100";
$("p").offset(hz);
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<button>객체 사용해 요소의 오프셋 재설정 (클릭)</button>
결과보기
offset() 예제 - 함수로 오프셋 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offset(function(n, c){
hz = new Object();
hz.left = c.left + 100;
hz.top = c.top + 100;
return hz;
});
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<button>요소 오프셋좌표 재설정 (클릭)</button>
결과보기
offset() 예제 - 다른 요소의 오프셋으로 오프셋 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offset($("span").offset());
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<button>span 요소와 동일하게 p 요소 오프셋 설정 (클릭)</button>
<span style="position:absolute;left:100px;top:150px;">span 요소 위치</span>
결과보기
offset() 예제 - 특정 offset 지점으로 이동
$( document ).ready(function() {
var offset = $("#hz").offset();
$('html, body').animate({scrollTop : offset.top}, 400);
});
qoqofh 님 (201006) https://sir.kr/qa/381501
