목차
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() 정의
웹문서 기준으로 선택요소의 오프셋 설정하거나 반환
1. 오프셋 반환 경우:
처음 매칭 (≒ 일치)하는 요소의 오프셋 반환.해당 좌표는 px 단위로 표현된 top, left 좌표 속성 갖는 객체임.
2. 오프셋 설정 경우:
모든 매칭 (≒ 일치)하는 요소의 오프셋 반환.
offset() 구문
오프셋 반환
$(selector ).offset()
오프셋 설정
$(selector ).offset({top:value ,left:value })
함수로 오프셋 설정
$(selector ).offset(function(index,currentoffset ))
[매개변수]
{top : value , left : value }
오프셋 설정 시 필요.
{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
