login register Sysop! about ME  

2022년 06월 08일 20시 23분 00초,     조회수 : 395
  제목 : HTML offsetTop에서 부모 엘레먼트는 도대체 기준이 뭔가요?
SEQ : 164391 글쓴이 : y99happy

작성 포맷 : TEXT 모드, 자동 줄바꿈 사용

<table>
   <tr>
      <td id="tdTest" style="width:300px;height:300px;border:1px #000000 solid;padding:50px;">
         <div id="divTest" style="border:1px #000000 solid;padding:30px;"> sfsdsdfsdf <font 
id="ftTest">sdfsdf</font></div>
      </td>
   </tr>
</table>
<script>
   document.onmousedown = function(){
      console.log (document.all.ftTest.offsetTop, document.all.ftTest.parentNode.id);
   }
</script>

위를 했을때 offsetTop은 왜 부모를 divTest를 왜면하고 tdTest로 부모부터의 거리를 가져오는 것일까요?

MDN에서는 
offsetTop is the number of pixels from the top of the closest relatively positioned parent element.

가장 가까운 상대적으로 가장 가까운 부모 엘레먼트의 상단에서부터의 픽셀값이라고 하는데
div는 가장 가까운 부모 엘레먼트가 안되는 이유가 뭘까요?

document.all.ftTest.parentNode.id 를 해보면 divTest가 나오는데요...
아... 정말 이런건 애매해서 쓸수가 없네요 ㅠㅠ

  wind1379
  2022-06-09(08:21)
캐릭 이미지
offsetTop
부모 요소에게서 상대적인 top좌표를 반환합니다. 여기서 중요한건 position이 relative인
부모 요소 만을 찾아서 기준으로 삼습니다. 만약에 부모 요소중에 position이 relative가
없다면 최상위 dom을 기준으로한 좌표를 반환합니다. 즉 절대좌표입니다.
참조 : https://dane-
itview.tistory.com/entry/%EA%B7%B8%EB%9E%98%EC%84%9C-Top-
%EC%9D%B4-%EC%96%B4%EB%94%98%EB%8D%B0-
getBoundingClientRecttop-elementoffsetTop-
%EC%B0%A8%EC%9D%B4%EC%A0%90

...[Mr.NET!]

  y99happy
  2022-06-09(09:56)
말씀하신 relative 도 부모로 인식 하지만 relative를 정의 하지 않아도
상위 노드를 부모로 인식한다면 그 상위 노드의 내부 테두리에서 부터의
거리를 가져옵니다.

  y99happy
  2022-06-09(10:03)
<div style="position:relative;">
<br><br>
<table>
<tr>
<td id="tdTest" style="width:300px;height:300px;border:1px #000000
solid;padding:50px;">
sfsdsdfsdf <font id="ftTest">sdfsdf</font>
</td>
</tr>
</table>
</div>
<script>
document.onmousedown = function(){
console.log (document.all.ftTest.offsetTop);
}
</script>

그렇다고 relative만 찾아서 가져온다 생각하면 위는 relative 상관 없이 td에서 부터 좌료
를 가져옵니다.



제목 작성자 날짜 조회
HTML offsetTop에서 부모 엘레먼트는 도대체 기준이 뭔가요? (3) y99happy 2022-06-08 395

 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})