이것은 아마도 정말 간단한 질문이지만 jQuery에서 요소 의 올바른 오프셋을 얻으려면 어떻게해야 합니까?
내가 할 수있는:
$("#whatever").offset().left;
그리고 그것은 유효합니다.
그러나 다음과 같이 보입니다.
$("#whatever").offset().right
정의되지 않았습니다.
그렇다면 jQuery에서 이것을 어떻게 수행합니까?
감사!!
답변
답변
var $whatever = $('#whatever');
var ending_right = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
참조 : .outerWidth ()
답변
아마도 귀하의 질문을 오해하고 있지만 오프셋은 수평 및 수직의 두 가지 변수를 제공해야합니다. 이것은 요소의 위치를 정의합니다. 그래서 당신이 찾고있는 것은 :
$("#whatever").offset().left
과
$("#whatever").offset().top
요소의 올바른 경계가 어디에 있는지 알아야하는 경우 다음을 사용해야합니다.
$("#whatever").offset().left + $("#whatever").outerWidth()
답변
Greg가 말한 내용에 추가하면 다음과 같습니다.
$ ( “# whatever”). offset (). left + $ ( “# whatever”). outerWidth ()
이 코드는 왼쪽에 상대적인 올바른 위치를 가져옵니다. 의도가 오른쪽에 상대적인 오른쪽 위치를 가져 오려는 경우 (예 : CSS right
속성을 사용할 때 ) 다음과 같이 코드에 추가해야합니다.
$ ( “# parent_container”). innerWidth ()-($ ( “# whatever”). offset (). left + $ ( “# whatever”). outerWidth ())
이 코드는 right
CSS 에서 속성을 처음 설정할 수 없을 때 오른쪽을 고정 앵커로 설정해야하는 애니메이션에서 유용합니다 .
답변
실제로 이것은 창이 왼쪽 상단 위치에서 전혀 스크롤되지 않은 경우에만 작동합니다.
페이지에 유지되도록 요소 위치를 변경하는 데 유용한 오프셋을 얻으려면 창 스크롤 값을 빼야합니다.
var offset = $('#whatever').offset();
offset.right = ($(window).width() + $(window).scrollLeft()) - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = ($(window).height() + $(window).scrollTop()) - (offset.top + $('#whatever').outerHeight(true));
답변
이 작업을 즉시 수행하는 기본 DOM API가 있습니다. — getBoundingClientRect
:
document.querySelector("#whatever").getBoundingClientRect().right
답변
Brendon Crawford가 여기에서 가장 좋은 답변을 얻었으므로 (코멘트에서) 그가 할 때까지 답변으로 옮기겠습니다 (그리고 조금 확장 할 수도 있습니다).
var offset = $('#whatever').offset();
offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));