외부 DIV에서 요소 위치 가져 오기

내부 div에 배치 된 요소를 외부 div에서 가져올 수 있습니까? 막연한 질문을 명확히하기 위해이 그림은이 그림에서외부 DIV에서 요소 위치 가져 오기

div http://img600.imageshack.us/img600/8200/45tn.png

아래에 제공됩니다.

큰 검은 사각형 = 외부 DIV, ID = "외부 DIV"

빨간색 사각형 = 제 1 내부 DIV, ID = "빨간색 - 내부 - 사업부"

파란색 사각형 = 두 번째 내부 DIV id 인 = "blue-inner-div"

빨강 및 파랑 div에 텍스트 영역이 있습니다. 왼쪽과 왼쪽이 그림에 표시되어 있습니다.

Red Div의 텍스트 영역 ID가 "TA1"이고 파란색 ID가 "TA2"라고 가정합니다.

outer-div에서 "TA1"또는 "TA2"의 위치를 가져올 수 있습니까? 예를 들어, TA2는 blue-inner-div 내부에 150의 위쪽과 왼쪽을 가졌지 만, 분명히 150이 아닌 outer-div의 관점에서 TA2의 위쪽과 왼쪽을 알기를 원했습니다.

출처

2013-10-11 Junior Programmer

잘 모르겠지만 텍스트 영역의 페이지 오프셋을 가져 와서 부모 요소의 페이지 오프셋을 차감 할 수 있습니다. – isherwood

http://api.jquery.com/office/ http://api.jquery.com/offset/ – andleer

@andleer OP는 "jquery"를 여기에 언급하지 않았습니다 ... – gustavohenke

아마도 .. . elem이 outer-div에 포함되지 않은 경우,이 문서 내에서 자신의 위치를 돌려 보낼 계정

var offset = { top: 0, left: 0 }; 
do { 
    offset.top += elem.offsetTop; 
    offset.left += elem.offsetLeft; 

    elem = elem.parentNode; 
} while (elem != null && elem.id !== "outer-div");

가져 가라.

또 다른 aproach, 조금 무거운하지만 jQuery의 솔루션에 매우 가까이 :

function getOffset(elem) { 
    var offset = elem.getBoundingClientRect(); 
    var docElem = document.documentElement; 

    return { 
    top: offset.top + window.pageYOffset - docElem.clientTop, 
    left: offset.left + window.pageXOffset - docElem.clientLeft 
    }; 
} 

var offsetOuter = getOffset(document.getElementById("outer-div")); 
var offsetTextarea = getOffset(document.getElementById("TA1")); 

console.log(offsetOuter.left - offsetTextarea.left); // ta-da

나는 당신이 단지 바닐라 JS를 사용하고 있는지 생각했다, 아니 libs와 (jQuery를 또는 무엇이든).

출처

2013-10-11 17:52:04 gustavohenke

예, 바닐라 JS를 사용하고 있으며 솔루션이 잘 작동했습니다. 답변을 주셔서 감사합니다 –

희망이 도움이 될 것입니다. 외부에서 DIV

위치 ... 참조

$(function(){ 
    alert($("#TA1").offset().left-$("#outer-div").offset().left); 
    alert($("#TA2").offset().left-$("#outer-div").offset().left); 
});

: http://jsfiddle.net/GF9VM/

P.S. 당신이 최고를 얻을 수있는 것과 같은 방법.

출처

2013-10-11 18:15:46 PSK

나는 질문 게시글에서 언급 한 것과 같은 의견을 말해야합니다. 그는 jQuery를 사용하지 않는다고 언급하지 않았습니다. – gustavohenke

괜찮 았으면 좋았어. – PSK

외부 DIV에서 요소 위치 가져 오기

답변

관련 문제