728x90
position() 메서드는 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로 떨어진 위치의 좌푯값을 반환하거나 변경할때 사용한다.
offset() 메서드는 문서(Document)를 기준으로 선택한 요소의 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용한다.
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 객체 조작 및 생성 </title> <script src="js/jquery.js"></script> <script> $(function( ){ var $txt1 = $(".txt_1 span"), $txt2 = $(".txt_2 span"), $box = $(".box"); var off_t = $box.offset().top; //100 var pos_t = $box.position().top; //50 $txt1.text(off_t); $txt2.text(pos_t); }); </script> <style> *{margin:0;padding:0;} #box_wrap{ width:300px; height:200px; margin:50px auto 0; position: relative; background-color:#ccc; } .box{ width:50px;height:50px; position:absolute; left:100px;top:50px; background-color:#f00; } </style> </head> <body> <div id="box_wrap"> <p class="box">박스</p> </div> <p class="txt_1">절대 top위칫값: <span></span></p> <p class="txt_2">상대 top위칫값: <span></span></p> </body> </html> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| before() / insertBefore() / after() / insertAfter() (0) | 2021.08.21 |
|---|---|
| 스크롤바 위치 메서드 scrollTop() / scrollLeft() (0) | 2021.08.21 |
| 수치조작메서드 (0) | 2021.08.21 |
| prop() 메서드 (0) | 2021.08.21 |
| val() 메서드 (0) | 2021.08.21 |
