[제이쿼리] jQuery 수치조작 메서드

 

제이쿼리(jQuery) 수치조작 메서드

---

 

제이쿼리 객체조작 메서드중 하나인 수치조작 메서드입니다.

 

 

수치 조작 메서드

---

수치 조작 메서드는 요소의 속성을 조작할 때 사용하는 메서드입니다.

 

 

 

 

HTML을 조금 공부해보신 분이라면 다음과 같은 BOX 모델사진을 본 적이 많을 것으로 생각됩니다. 제이쿼리 수치 조작 메서드는 BOX 모델의 수치를 조작하는 것이라고 생각하면 쉽게 이해가 됩니다.

 

 

 

요소의 높이 / 너비 메서드

---

height와 width() 메서드는 여백 및 선 두께를 제외한 순수 요소의 높잇값과 너빗값을 계산합니다. innerHeight() 와 innerWidth() 메서드는 여백을 포함한 너빗값을 계산하고, outerHeight()와 outerWidth() 메서드는 여백 및 선을 포함한 요소의 높잇값과 너빗값을 계산합니다.

종류	설명
$(요소 선택).height(); $(요소 선택).height(값);	안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환합니다.
$(요소 선택).width(); $(요소 선택).width(값);	안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환합니다.
$(요소 선택).innerHeight(); $(요소 선택).innerHeight(값);	안쪽 여백을 포함한 높잇값을 반환하거나 변환합니다.
$(요소 선택).innerWidth();  $(요소 선택).innerWidth(값);	안쪽 여백을 포함한 너빗값을 반환하거나 변환합니다.
$(요소 선택).outerHeight(); $(요소 선택).outerHeight(값);	선과 안쪽 여백을 포함한 높잇값을 변환하거나 반환합니다.
$(요소 선택).outerWidth();  $(요소 선택).outerWidth(값);	선과 안쪽 여백을 포함한 너빗값 변환하거나 반환합니다.

 

요소 위치 메서드

---

요소의 위치를 조작하는 메서드 입니다.

종류	설명
$(요소 선택).position() .[left | right | top | bottom ]	포지션 기준이 되는 요소를 기준으로 요소의 위치 좌표을 반환한다.
$(요소 선택).offset().[ left | top ]	문서(Document)를 기준으로 선택한 요소의 위치 좌표을 반환한다.

 

 

 

스크롤바 위치 메서드

---

설명	종류
$(요소 선택).scrollTop(); $(요소 선택).scrollLeft();	스크롤바가 수직 또는 수평으로 이동한 위칫값을 반환합니다.
$(요소 선택).scrollTop(새 값); $(요소 선택).scrollLeft(새 값);	입력한 수치만큼 수직 또는 수평으로 스크롤바를 이동시킵니다.

 

 

 

 

Post

---

• [제이쿼리] jQuery 속성조작 메서드
• [제이쿼리] jQuery 수치조작 메서드
• [제이쿼리] jQuery 객체편집 메서드

References

---

• 생활코딩: 선택자
• w3schools
• TCP school

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)