.offset()
원문 링크 
http://api.jquery.com/offset/
함수들
offset( )
- .offset( )
offset( coordinates )
- .offset( coordinates )
- .offset( function(index, coords) )
개요 : 조건에 일치하는 요소 집합 중 첫번째 요소의 문서 상의 상대적인 좌표값을 반환합니다.
- .offset()
.offset() 함수는 어떤 요소의 문서 상의 상대적인 현재 위치를 알 수 있습니다. 부모 요소를 기준으로 한 상대적인 위치를 알아내는 .position()과는 다소 대비됩니다. 전역(global) 조작(특히, 드래그앤드롭을 구현하기 위해)으로 새로운 요소를 기존의 요소에 위치하기 위해서는 .offset() 함수가 더 유용합니다.
.offset() 함수는 객체의 속성 중 top 과 left 값을 반환해 줍니다.
Note: jQuery는 숨은 요소 또는 body 요소의 borders, margin, padding 값에 대한 내용은 얻어낼 수 없습니다.
예 제
두번째 문단(p태그)의 좌표에 접근해 봅니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );</script>
</body>
</html>
미리보기
좌표값 반환됬네요.
예 제
클릭하면 좌표반환을 구현해 볼까요.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; color:blue; width:200px;
cursor:pointer; }
span { color:red; cursor:pointer; }
div.abs { width:50px; height:50px; position:absolute;
left:220px; top:35px; background-color:green;
cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="result">Click an element.</div>
<p>
This is the best way to <span>find</span> an offset.
</p>
<div class="abs">
</div>
<script>
$("*", document.body).click(function (e) {
var offset = $(this).offset();
e.stopPropagation();
$("#result").text(this.tagName + " coords ( " + offset.left + ", " +
offset.top + " )");
});
</script>
</body>
</html>
미리보기
파란 텍스트, 빨간 텍스트(find), 네모 박스를 클릭하면 각각의 좌표를 반환해 주네요.
개요 : 조건에 일치하는 요소들 모두를 문서상에 상대적 좌표값으로 세팅합니다.
- .offset( coordinates )
- coordinates 정수 좌표값
- .offset( function(index, coords) )
- function(index, coords) 좌표셋을 반환하는 함수.
.offset()를 사용하여 새로운 위치로 세팅할 수 있습니다. 문서 상의 상대적인 위치로 정해집니다. 만약 요소의 position 스타일이 현재 static이라면, relative로 재설정하여 사용해야 합니다.
예 제
두번째 문단(p 태그)의 좌표를 재설정 합니다.
<!DOCTYPE html>
<html>
<head>
<style>p { margin-left:10px; } </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>$("p:last").offset({ top: 10, left: 30 });</script>
</body>
</html>
미리보기
좌표 구할 일들 많으시잖아요. 잘 사용하셔요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기, prepend() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 상대 좌표 구하기, position() (0) | 2011.11.22 |
| jQuery API 정복 - border 포함 넓이 구하기, outerWidth() (0) | 2011.11.22 |
| jQuery API 정복 - border포함 높이 구하기, outerHeight() (0) | 2011.11.22 |
| jQuery API 정복 - 앞에 추가하기, insertBefore() (0) | 2011.11.22 |
| jQuery API 정복 - 뒤에 추가하기, insertAfter() (0) | 2011.11.22 |
| jQuery API 정복 - padding을 포함한 넓이 제어, innerWidth() (0) | 2011.11.22 |
| jQuery API 정복 - padding 포함 높이 제어, innerHeight() (0) | 2011.11.22 |