[자바스크립트] 노드의 위치 , position, offset의 차이점

div태그를 세 개 중첩했다. 구조상으로는 parent1 > parent2 > child 이다.

 

부모 좌표 노드 - offsetParent( )

child 노드에 offsetParent를 적용하여 $parent변수에 저장하고

반환되는 노드의 id 속성을 콘솔창에 찍어봤다.

child노드의 바로 상위는 parent2일텐데 

콘솔에는 parent1으로 찍혔다.

이유는 css의 position때문이다. 따로 position을 정해주지 않아서 parent2노드는 위치계층도에서 제외된다.

 

노드의 지역 위치 구하기 - position( )

5개의 물고기 이미지를 두고 해당 사진을 클릭하면 위치를 위에 표시해본다.

fish클래스의 노드를 클릭했을 때 

pos변수에 클릭된 노드의 position을 저장하고

str문자열을 통해 id와 position내의 속성인 left와 top을 구해준다.

각 사진의 위치는 css를 통해 지정해줬다.

노드의 위치 정보는 position함수를 통해 접근할 수 있다.

 

노드의 전역 위치 구하기 - offset( )

코드를 살짝 변경해서 첫째줄은 position으로, 

두번쨰 줄은 offset으로 구하고 left와 top값을 출력하도록 해봤다.

position으로 구한 위치와 offset으로 구한 위치에 차이가 있는 것을 볼 수 있다.

각각 101, 131만큼 차이가 난다.

그 차이는 바로 물고기를 감싸고 있는 parent의 위치에서 오는 것이다.

parent div의 위치값에 테두리의 1px을 더하면 차이값이랑 동일하다.

offset()은 페이지 전체에서 해당 위치를 구하고

position()은 부모좌표 노드의 위치를 기준으로 해당 위치를 구한다.

 

지역 위치 변경하기

position으로 접근 가능한 지역위치는 부모노드를 기준으로 위치를 책정한다.

버튼을 클릭했을 때 (50,50)위치부터 50씩 더해서 물고기들을 정렬하도록 한다.

물고기가 갇혀있는 어항의 끝점에서부터 50이 측정되는 것을 알 수 있다.

지역 위치를 변경하려면 css를 사용한다.

 

전역 위치 변경하기

어항을 클릭했을 때 클릭한 위치를 e.page를 통해 구하고

클릭한 위치값을 물고기들의 위치에 대입시킨다.

클릭한 피이지의 위치대로 물고기들이 이동했다.

페이지 전체에서의 위치값을 주려면 offset을 사용한다.