j query 수치 조작 메서드

카테고리 없음

j query 수치 조작 메서드

깡출깡충 2024. 8. 20. 14:58

수치 조작 메서드
요소 위치 메서드

수치 조작 메서드

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

(기본형)
1. $("요소선택").width() 또는 $("요소선택").width(숫자)
: 선택한 요소의 순수한 컨텐츠 영역(padding, margin, border 제외)의 width값을 반환하거나 바꿉니다.

2. $("요소선택").height() 또는 $("요소선택").height(숫자)
: 선택한 요소의 순수한 컨텐츠 영역(padding, margin, border 제외)의 높이값을 반환하거나 바꿉니다.

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

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

5. $("요소선택").outerWidth() 또는 $("요소선택").outerWidth(숫자)
: border영역까지를 포함한 넓이값을 반환하거나 바꿉니다.

6. $("요소선택").outerHeight() 또는 $("요소선택").outerHeight(숫자)
: border영역까지를 포함한 높이값을 반환하거나 바꿉니다.

수치 조작 메서드 사용해보기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>수치 조작 메서드</title>
    <script src="./js/jquery.min.js"></script>
    <style>
      p {
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid skyblue;
        background-color: azure;
        /* box-sizing이 설정되어 있는지 여부에 따라 
        결과값이 달라집니다 */
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <p id="p1">내용1</p>
    <p id="p2">내용2</p>
    <script>
      $(function () {
        let w1 = $("#p1").width();
        console.log(w1);

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

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

        $("#p2").outerWidth(200).outerHeight(200);
      });
    </script>
  </body>
</html>

요소 위치 메서드

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

(기본형)
$("요소선택").position().lert / .right / .top / .bottom
$("요소선택").offset().left / .top
: 좌표 이름 뒤에는 소괄호가 없습니다.

요소 위치 메서드 사용해보기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>수치 조작 메서드</title>
    <script src="./js/jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      p {
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid skyblue;
        background-color: azure;
        /* box-sizing이 설정되어 있는지 여부에 따라 
        결과값이 달라집니다 
        box-sizing: border-box;*/
      }

      #box_wrap {
        width: 300px;
        height: 200px;
        margin: 100px auto;
        position: relative;
        background-color: azure;
      }

      .box {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 100px;
        top: 50px;
        background-color: thistle;
      }
    </style>
  </head>
  <body>
    <div id="box_wrap">
      <div class="box">박스</div>
    </div>

    <div class="txt1">절대 top 위치값 : <span></span></div>
    <div class="txt2">상대 top 위치값 : <span></span></div>
    <script>
      $(function () {
        // 요소 위치 메서드
        let $text1 = $(".txt1 span"),
          $text2 = $(".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);

        $text1.text(off_t);
        $text2.text(pos_t);
      });
    </script>
  </body>
</html>