728x90
요소의 크기를 정할 수 있는 메서드?
메서드를 통해 변경하고자 하는 요소의 크기를 정할 수 있으며,
총 갯수는 약 15가지가 되더라구요,, 오늘은 이것에 대하여 알아보겠습니다!
| Dimensions | width() | - | 요소의 가로(패딩/보더/마진 미포함) |
| height() | - | 요소의 세로(패딩/보더/마진 미포함) | |
| innerWidth() | clientWidth | 요소의 가로(패딩포함, 보더/마진 미포함) | |
| innerHeight() | clientHeight | 요소의 세로(패딩포함, 보더/마진 미포함) | |
| outerWidth() | offsetWidth | 요소의 가로(패딩/보더포함, 마진 미포함) | |
| outerHeight() | offsetHeight | 요소의 세로(패딩/보더포함, 마진 미포함) | |
| outerWidth(true) | - | 요소의 가로(패딩/보더/마진 포함) | |
| outerHeight(true) | - | 요소의 세로(패딩/보더/마진 포함) | |
| $(window).width() | innerWidth / outerWidth | 브라우저의 가로 값(스크롤바 미포함 / 포함) | |
| $(window).Height() | innerHeight / outerHeight | 브라우저의 세로 값(스크롤바 미포함 / 포함) | |
| offset | offset().top / offset().left | offsetTop / offsetLeft | 요소의 좌표값(문서 기준) |
| offsetParent() | 요소의 좌표값(부모 기준) | ||
| position() | 요소의 좌표값(기준점 기준) | ||
| scrollLeft() | pageXoffset / winodw.scrollX | 요소의 가로 스크롤 값 | |
| scrollTop() | pageYoffset / winodw.scrollY | 요소의 세로 스크롤 값 |
보기 예제
width: 400px
margin: 20px
border: 1px
padding: 20px
margin: 20px
border: 1px
padding: 20px
여기에 결과값이 표시됩니다.
728x90
반응형
'Javascript' 카테고리의 다른 글
| 재귀,콜백,스코프/클로저,클래스에 대한 정리 (2) | 2022.09.20 |
|---|---|
| mouseover & mouseenter 이벤트에 대해서 알아볼까? (4) | 2022.09.06 |
| 함수 유형 : 객체 생성자 / 프로토 타입 / 객체 리터럴 (6) | 2022.08.23 |
| search() 함수에 대하여 (3) | 2022.08.23 |
| charAt() n번째로 단어를 찾아줘~~~~ (3) | 2022.08.23 |
댓글