[제이쿼리] - 수치 조작 매서드 / 요소 위치 메서드 position , offset

수치 조작 메서드

수치 조작 메서드는 요소의 속성을 조작할 때 사용하는 메서드로 요소의 넓이 높이나 여백 영역을 조작하거나 위치를 바꿀 때 사용한다. 

[기본형]
1. $('요소선택').width() 또는 $('요소선택').width(숫자)
: 선택한 요소의 순수한 컨텐츠 영역(패딩, 보더, 마진을 제외한 영역)의 넓이값을 반환 또는 값을 바꾼다. 

값이 무엇인지 알고 싶을 땐 앞쪽 기본형을 사용

2. $('요소선택').height() 또는 $('요소선택').height(숫자)
: 선택한 요소의 순수한 컨텐츠 영역(패딩, 보더, 마진을 제외한 영역)의 높이값을 반환 또는 값을 바꾼다.

3. $('요소선택').innerWidth() 또는 $('요소선택').innerWidth(숫자)
: padding 영역까지를 포함한 넓이값을 반환 또는 값을 바꾼다. 

4. $('요소선택').innerHeight() 또는 $('요소선택').innerHeight(숫자)
: padding 영역까지를 포함한 높이값을 반환 또는 값을 바꾼다. 

5. $('요소선택').outerWidth() 또는 $('요소선택').outerWidth(숫자)
: border, padding 영역까지를 포함한 넓이값을 반환 또는 값을 바꾼다. 
        
6. $('요소선택').outerHeight() 또는 $('요소선택').outerHeight(숫자)
 : border, padding 영역까지를 포함한 높이값을 반환 또는 값을 바꾼다. 

 let w1 = $("#p1").width();

        console.log(w1); //설정해놨던 100을 반환(패딩제외)

        let w2 = $("#p1").innerWidth();

        console.log(w2); //패딩을 포함한 140이 반환

        let w3 = $("#p1").outerWidth();

        console.log(w3); //패딩과 보더를 포함한 150이 반환

 $("#p2").outerWidth(200).outerHeight(200);

<p id="p1">내용1</p>

    <p id="p2">내용2</p>

<style>

      p {

        width: 100px;

        height: 100px;

        padding: 20px;

        border: 5px solid dodgerblue;

        background-color: lightcyan;

        /* 박스사이징의 설정여부에 따라 수치 조작 메서드의 결과값이 달라진다. */

        /* box-sizing: border-box; */

      }

    </style>

---

 요소 위치 메서드
 

요소 위치 메서드에는 position()메서드와 offset()메서드가 있다.
좌표이름 뒤에는 ()를 쓰지 않는다.

- position( )메서드
: position기준이 되는 요소를 기준으로 선택한 요소에서 가로 / 세로로 떨어진 위치 좌표값을 반환하거나 바꿀 때 사용한다.

[기본형]

$('요소선택').position().left / .right / .top / .bottom

- offset( ) 메서드
: document문서를(브라우저의 0점) 기준으로 선택한 요소의 가로 / 세로 떨어진 위치 좌표값을 반환하거나 바꿀 때 사용.

[기본형]

$('요소선택').offset().left / .top

 

   

 // 요소 위치 메서드 (변수 앞에 $ 붙일 수 있다.)

        let $txt1 = $(".txt1 span"),

          $txt2 = $(".txt2 span"),

          $box = $(".box");

        let off_t = $box.offset().top;

        console.log("off_t :", off_t);

        let pos_t = $box.position().top;

        console.log("pos_t :", pos_t);

        $txt1.text(off_t);

        $txt2.text(pos_t);