프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] Javascript, jquery DIV width height 함수

2022.12.07
북마크 [출처 이동]    작성자 정보
첨부이미지(0/1)

- 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

이 포스트 공유하기

전체목록