• 회원가입
  • 로그인

[HTML_CSS] JQ - position() 메서드 - 부모요소 기준으로 요소 위치 반환 (= position메서드 = 포지션 메서드)

목차
  1. position() 예제 - 요소의 top, left 위치 반환
  2. position() 정의
  3. position() 구문
  4. position() 예제 - 요소 위치를 부모요소 기준해 반환

 

position() 예제 - 요소의 top, left 위치 반환

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    var x = $("p").position();

    alert("Top 위치: " + x.top + " Left 위치: " + x.left);

  });

});

</script>


<p>홈짱닷컴 Homzzang.com</p>

<button>클릭</button>

 

결과보기

 

position() 정의

 

일치하는 첫 번재 요소의 부모요소 기준한 상대 위치 반환.

 


 

예제 더 보기

https://api.jquery.com/position/

 

 

position() 구문

 

$(selector).position()

 


[매개변수]

 

없음.

 


[반환값]


2개의 위치 속성 갖는 객체 반환.

  • top 속성 - 상단 기준 (예) object.top
  • left 속성 - 왼쪽 기준 (예) object.left

 

 

position() 예제 - 요소 위치를 부모요소 기준해 반환

 

<style>

div {border:1px solid black;padding:50px;margin:50px;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    x = $("p").position();

    $("#top").text(x.top);

    $("#left").text(x.left);

  });

});

</script>


<div>

  <p>홈짱닷컴 Homzzang.com (<span id="top">x.top</span>, <span id="left">x.left</span>)</p>

  <button>클릭</button>

</div>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012