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.