jQuery .offset ()로 위치 가져 오기 및 설정


106

jQuery .offset메서드 를 사용하여 요소의 위치를 ​​가져오고 설정하는 방법은 무엇입니까?

내가 div layer1와 다른 layer2. 위치를 가져 layer1오고 동일한 위치를 설정하려면 layer2어떻게 해야 합니까?


6
Denise, jQuery 웹 사이트에서 .offset () 메서드도 확인 했습니까? 또한 아래 스티브의 대답을 받아들이지 않으시겠습니까?!
Rafid

1
@Rafid 그녀는 기본적으로 돌아 오지 않았다
jcollum

6
그녀의 포인트를받을 수 있습니까?
ganders

답변:


191
//Get
var p = $("#elementId");
var offset = p.offset();

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});

7
당신은 전체 전달할 수 offset(가), 그래서 객체를 //set될 것입니다 : $("#secondElementId").offset(offset)
mecampbellsoup

야! div의 하단과 오른쪽으로 어떻게 설정할 수 있습니까? 더 아래쪽, 오프셋에서 바로 재산이 없다
JerryGoyal

34

다른 옵션을 권장합니다. jQuery UI에는 요소를 서로 상대적으로 배치 할 수있는 새로운 위치 기능이 있습니다. 전체 문서 및 데모는 http://jqueryui.com/demos/position/#option-offset을 참조하십시오 .

다음은 위치 기능을 사용하여 요소를 배치하는 한 가지 방법입니다.

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);

13
이 답변은 설명없이 두 번 투표되었습니다. 내 대답에 반대한다면 이유를 알려주십시오. 감사!
KSev 2013

2
OP가 jQuery 만 요청하는 동안 jQuery UI를 사용하기 때문일 수 있습니다.
유모차

7
종종 사람들은 아래로 투표를하면서 멀리갑니다. OP의 확장이라하더라도 더 넓은 답변이 타인에게 무용지물이라고 가정하지 말자. '이 적절한 질문이 아니므로 폐쇄'나를에 시작하지 마십시오)
착륙

@KSev-나는 미래에서 왔습니다. jQuery를 여전히에 세터가없는 .position... 참조 : api.jquery.com/position
Koshinae

@Koshinae jQuery "UI"의 일부입니다. 위의 링크를 참조하거나 jqueryui.com/position을 시도 하십시오 . 또한 jQuery를 사용하는 경우 angularJS 2.0 사용을 고려할 수 있습니다. 그러나 나는 당신이 레거시 코드를 유지하고 있다고 기대합니다.
KSev

16

할 수 있지만 사용 offset()하면 문서와 관련된 요소의 위치가 설정 된다는 것을 알아야합니다 .

$('.layer1').offset( $('.layer2').offset() );

0

여기에 옵션이 있습니다. 이것은 x 좌표만을위한 것입니다.

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});

offset (). left와 css.left는 같은 것이 아니며 페이지 구조에 따라 같은 값을 가질 수도 있고 그렇지 않을 수도 있습니다.
Kalle 2013 년

나는 +1했다. 그것은 나를 위해 잘 작동하는 것 같고 본질적으로 85+ 투표를 가진 아래의 선택되지 않은 답변과 동일합니다.
Paul Nelson Baker

나를 위해 일했습니다. 기여해 주셔서 감사합니다!
Erlend KH

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.