[소스] Javascript, jquery DIV width height 함수
2022.12.07
작성일/수정일
2023-03-20 09:38:10 / 2022-12-07 17:53:00
- https://www.relation.co.kr/images_board/board_system_publishing/83/index.php
Javascript
* clientWidth, clientHeight
- 실제로 보여지는 컨턴츠의 영역(padding 포함)의 값을 리턴,
* scrollWidth, scrollHeight
- 보여지는 것과 상관없이 실제 영역을 크리를 리턴한다. 화면상에 표시되지 않은 콘텐츠를 표함한 높이
* offsetWidth, offsetHeight
- 엘리먼트의 padding, border, scroll(스크롤바 포함) 사이즈를 포함한 영역의 값을 리턴
* getBoundingClientRect()
- 랜더링된 크기를 리턴한다. transform:scale 적용된 엘리먼트 영역을 구할때 사용
jquery
* width(), height()
- 요소 높이만
* innerwidth(), innerheight()
- padding을 포함한 값을 리턴
*outerWidth(), outerHeight()
- border, padding을 포함한 값을 리턴
*outerWidth(true), outerHeight(true)
- margin,border, padding을 포함한 값을 리턴
** display: none인경우
- 값을 구할 수 없음 : offsetHeight, clientHeight
- 값을 구할 수 있음 : height, innerHeight, outerHeight
관련 URL
- https://blog.naver.com/websearch/220900701105
- http://jsfiddle.net/y8Y32/25/
- https://ohgyun.com/571