Development Tip

jquery로 div 하단 위치 찾기

yourdevel 2020. 11. 19. 22:06
반응형

jquery로 div 하단 위치 찾기


div가 있고 하단 위치를 찾고 싶습니다. 이렇게 Div의 상단 위치를 찾을 수 있지만 어떻게 하단 위치를 찾을 수 있습니까?

var top = $('#bottom').position().top;
return top;

외부 높이를 상단에 추가하면 상위 요소에 상대적인 하단이 있습니다.

var $el = $('#bottom');  //record the elem so you don't crawl the DOM everytime  
var bottom = $el.position().top + $el.outerHeight(true); // passing "true" will also include the top and bottom margin

절대 위치 요소를 사용하거나 문서를 기준으로 위치를 지정할 때 오프셋을 사용하여 대신 평가해야합니다.

var bottom = $el.offset().top + $el.outerHeight(true);

trnelson지적 했듯이 이것은 100 % 작동하지 않습니다. 배치 된 요소에이 방법을 사용하려면 오프셋도 고려해야합니다. 예제는 다음 코드를 참조하십시오.

var bottom = $el.position().top + $el.offset().top + $el.outerHeight(true);

편집 :이 솔루션은 이제 원래 답변에도 있습니다.

받아 들여지는 대답은 정확하지 않습니다. position () 함수는 부모에 상대적이므로 사용해서는 안됩니다. 전역 위치 지정 (대부분의 경우?)을 수행하는 경우 다음과 같이 외부 높이와 함께 오프셋 상단 만 추가해야합니다.

var actualBottom = $(selector).offset().top + $(selector).outerHeight(true);

문서 http://api.jquery.com/offset/


패딩, 테두리 등없이 높이 만 사용하려는 경우 지금까지의 답변이 작동합니다.

패딩, 테두리 및 여백을 고려하려면을 사용해야합니다 .outerHeight.

var bottom = $('#bottom').position().top + $('#bottom').outerHeight(true);

var bottom = $('#bottom').position().top + $('#bottom').height();

바닥은있는 top+를 outerHeight, 하지height 가 마진이나 패딩을 포함하지 것이라고한다.

var $bot,
    top,
    bottom;
$bot = $('#bottom');
top = $bot.position().top;
bottom = top + $bot.outerHeight(true); //true is necessary to include the margins

var top = ($('#bottom').position().top) + ($('#bottom').height());

참고 URL : https://stackoverflow.com/questions/12749844/finding-the-position-of-bottom-of-a-div-with-jquery

반응형