jQuery - 수치 조작 메소드

다음 표를 이용하면 브라우저의 크기나 요소의 크기를 얻거나 설정할 수 있습니다.

메소드	설 명
.width() .height()	컨텐츠 영역의 가로/세로크기를 얻거나 설정 (%, px, 수치 입력 가능)
.innerWidth() .innerHeight()	패딩 영역을 포함한 가로/세로크기를 얻거나 설정 (%, px, 수치 입력 가능)
.outerWidth() .outerHeight()	보더 영역을 포함한 가로크기를 얻거나 설정 (%, px, 수치 입력 가능)
.position().left .position().top	선택한 요소의 부모요소를 기준으로 x, y 좌표값을 얻음. (px 단위로 얻음)
.offset().left .offset().top	브라우저 왼쪽 상단 끝을 기준으로 선택한 요소까지의 x, y 좌표값을 얻거나 설정. (px 단위로 얻음)
.scrollLeft()	선택한 요소로부터 수평 스크롤막대까지의 수치를 얻거나 설정
.scrollTop()	선택한 요소로부터 수직 스크롤막대까지의 수치를 얻거나 설정

.*width() 와 .*height()

*width() 와 *height() 는 요소의 너비나 높이 값을 구할 수 있습니다.

요소는 실제로 박스(box)의 형태로 이루어져 있습니다. 박스란 이미지, 도형, 글자들 모두를 말합니다. p, table, ol, ul, img, input, textarea, select 와 object 등이 포함되며, 이러한 박스는 다음의 형태로 이루어져 있습니다.

이와 같은 박스의 크기를 구하는 메소드가 *.width() 입니다. 컨텐츠 영역의 크기를 구할 때는 width(), height() 메소드를 사용하고, 컨텐츠 영역과 패딩 영역을 포함한 크기를 구하려면 innerWidth(), innerHeight() 메소드를 이용합니다.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 var box = $(".use-nth");

 console.log(box.width());
 /* 결과: 200 */

 // 패딩 영역을 포함한 크기
 console.log(box.innerWidth());
 /* 결과: 220 */

 // 보더 영역을 포함한 크기
 console.log(box.outerWidth());
 /* 결과: 222 */
});
</script>

<div class="use-nth">
  하보니 PHP
</div>

댜음은 window 나 document 에 대한 너비에 대한 예제입니다.

// 메뉴바, 툴바, 스크롤바의 크기를 제외한 전체 너비
$(window).width();

// document 영역의 전체 너비
$(document).width();

.position() 과 .offset()

이 메소드는 위치 메소드입니다. 문서(document)를 기준으로 선택한 요소까지의 절대좌표를 구할 때는 offset() 메소드를 이용하고, 부모 요소를 기준으로 상대 좌표를 구하고자 할 때는 position() 메소드를 이용합니다.

다음 그림은 절대 좌표의 기준이 왼쪽 상단을 나타냅니다. 여기서 주의할 점이 window 가 아니라 document 가 기준점입니다.

위치 값을 얻거나 설정할 때는 다음과 같습니다.

// 수직 값 얻기
$(선택 요소).offset().top;

// 수평 값 얻기
$(선택 요소).offset().left;


// 수직 400 만큼 이동
$(선택 요소).offset({top: 400});

// 수평 100 만큼 이동
$(선택 요소).offset({left: 100});

// 수직/수평으로 이동
$(선택 요소).offset({top: 150, left: 250});

다음은 top 은 200(px) 만큼 left 는 100(px) 만큼 이동시킵니다.

<style>
.use-nth {
  border: 1px solid;
  width: 300px;
  height: 300px;
  padding:10px;
  background: yellow;
}

.mv {
  background: #9c9;
  width: 50px;
  height: 50px;
}
</style>

<script>
$(function(){
 $(".mv").offset({top: 200, left: 100});
});
</script>

<div class="use-nth">
  <div class="mv">요소</div>
</div>

다음은 offset() 과 position() 을 비교한 결과입니다.

<style>
.use-nth {
  border: 1px solid;
  width: 100px;
  height: 100px;
  padding:50px;
  background: yellow;

  position: absolute;
  left: 100px;
  top:100px;
}

.mv {
  background: #9c9;
  width: 50px;
  height: 50px;
}
</style>

<script>
$(function(){
 console.log($(".mv").position().top);
 /* 결과: 50 */

 console.log($(".mv").offset().top);
 /* 결과: 151 */
});
</script>

<div class="use-nth">
  <div class="mv">요소</div>
</div>

.scrollLeft() 와 scrollTop()

요소의 최초 스크롤바의 현재의 수평/수직 위치를 얻거나 설정합니다. 다음은 스크롤바를 수평으로 300(px) 만큼 이동시킵니다.

<style>
.use-nth {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: auto;
  background: yellow;
}
h1 {
  width: 1000px;
  height: 1000px;
}
</style>

<script>
$(function(){
 $(".use-nth").scrollLeft( 300 );
});
</script>

<div class="use-nth">
  <h1>안녕~ 하보니 만나서 반가워</h1>
</div>