부모 좌표 노드 구하기 offsetParent()

부모좌표노드란?

특정 노드의 기준 좌표가 되는 노드를 말한다.

즉 부모 좌표가 변하면 자식 노드도 영향을 받아 변하게 된다.

 

일반적으로 부모노드는 대상 노드를 감싸고 있는 노드가 부모 노드가 되지만

자바스크립트 DOM에서는 position absolute 또는 relative로 설정된 조상 노드 중 가장 근접한 노드가 부모 좌표노드가 된다.

 

offsetParent()

$대상.offsetParent{}

 

버튼을 클릭하면 p태그의 부모좌표노드가 클릭 된다.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").offsetParent().css("background-color", "red");
  });
});
</script>

<button>Set background-color</button>

<div style="border:1px solid black;width:70%;position:absolute;left:10px;top:50px">
<div style="border:1px solid black;margin:50px;background-color:yellow">

<p>Click button to set the background color of the first positioned parent element of this paragraph.</p>

</div></div>

p태그 바로위를 감싸고 있는 div 태그는 position absolute 또는 relative 설정아 안되어있기 때문에 그 상위 div가 부모좌표노드가 된다.

 

 

 

 

 

 

 

 

참고 : https://www.w3schools.com/jquery/css_offsetparent.asp