1. .offset()
: 선택된 요소의 문서에 대한 상대적인 오프셋 좌표를 반환함
: 오프셋을 반환하는 데 사용되는 경우 - 첫번째 일치하는 요소의 오프셋 좌표(top, left의 속성값)를 반환.
: 오프셋을 설정하는데 사용되는 경우 - 모든 일치하는 요소의 오프셋 좌표를 설정
: 문법
1) offset 좌표 리턴 - $(selector).offset()
2) offset 좌표 설정 - $(selector).offset({top: value, left: value})
3) Function을 사용하여 offset 좌표를 설정할 때 - $(selector).offset(function(index, currentoffset))
: 예) $("button").click(function(){ // offset 좌표를 리턴
var x = $("p").offset();
alert("Top : " + x.top + " Left : " + x.left);
});
2. .offsetParent()
: 첫번째 위치된 parent element를 반환한다. element는 jQuery와 배치될 수 있고, CSS의 position 속성(상대, 절대 또는 고정)과 배치될 수 있다.
: 문법 - $(selector).offsetParent()
: 예) $("button").click(function() {
$("p").offsetParent().css("background-color", "red");
});
3. .position()
: 첫번째 일치되는 element의 위치를 반환함. top으로부터의 좌표와 왼쪽으로부터 좌표, 두 개의 속성 값을 반환함
: 문법 - $(selector).position();
: 예) $("button").click(function(){ // position 값을 리턴
var x = $("p").position);
alert("Top : " + x.top + " Left : " + x.left);
});
4. .scrollLeft()
: 선택된 요소의 가로 스크롤 위치를 설정하거나 반환한다. 스크롤바가 맨 왼쪽에 있을 때 위치는 0
: 위치를 반환하는데 사용하는 경우 - 첫번째 일치하는 요소의 스크롤 막대의 가로 위치를 반환
: 위치를 설정하는데 사용하는 경우 - 일치하는 모든 요소에 대한 스크롤 막대의 가로 위치를 설정함
: 문법
- $(selector).scrollLeft();
- $(selector).scrollLeft(position);
: 예) $("button").click(function(){
alert($("div").scrollLeft());
});
5. .scrollTop()
: 선택된 요소의 세로 스크롤 위치를 설정하거나 반환한다. 스크롤바가 맨 위쪽에 있을 때 위치는 0
: 위치를 반환하는데 사용하는 경우 - 첫번째 일치하는 요소의 스크롤 막대의 세로 위치를 반환
: 위치를 설정하는데 사용하는 경우 - 일치하는 모든 요소에 대한 스크롤 막대의 세로 위치를 설정함
: 문법
- $(selector).scrollTop();
- $(selector).scrollTop(position);
: 예) $("button").click(function(){
alert($("div").scrollTop());
});
