본문 바로가기

[HTML] clientWidth, offsetWidth, scrollWidth 개념 정리

2008. 7. 25.


# *------------------------------------------------------------------------------------------*
# clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWIdth, scrollHeight 개념 정리
# *------------------------------------------------------------------------------------------*

1. element.offsetWidth, element.offsetHeight
 1) element.offsetWidth와 element.offsetHeight는 W3C권고안이 아님 (MSIE's DHTML Object Model)
 2) element.offsetWidth : element의 border, 수직/수평 padding, css width를 포함한폭
     * 즉 화면을 봤을 때 보여지는 엘리먼트의 폭
 3) element.offsetHeight : element의 border, 수직/수평 padding, cssheight를포함한 높이
     * 즉 화면을 봤을 때 보여지는 엘리먼트의 높이
 
[관련URL] offsetWidth : http://developer.mozilla.org/en/docs/DOM:element.offsetWidth
[관련URL] offsetHeight : http://developer.mozilla.org/en/docs/DOM:element.offsetHeight


2. element.clientWidth, element.clientHeight
 1) W3C 표준 아님 (MSIE의 DHTML Object Model)
 2) element.clientWidth : element의 border를 뺀 안쪽 폭
 * 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 안쪽 폭
 3) element.clientHeight : element의 border를 뺀 안쪽 높이
 * 즉 화면을 봤을 때 테두리를뺀 엘리먼트의 안쪽 높이

[관련URL] clientWidth : http://developer.mozilla.org/en/docs/DOM:element.clientWidth
[관련URL] clientHeight : http://developer.mozilla.org/en/docs/DOM:element.clientHeight


3. element.scrollWidth, element.scrollHeight
 1) W3C 권고안이 아님
 2) element.scrollWidth : 엘리먼트의 스크롤 폭
 3) element.scrollHeight : 엘리먼트의 스크롤 높이

[관련URL] element.scrollWidth : http://developer.mozilla.org/en/docs/DOM:element.scrollWidth
[관련URL] element.scrollHeight : http://developer.mozilla.org/en/docs/DOM:element.scrollHeight



출처 : 난 네가좋아님 블로그

'프로그래밍' 카테고리의 다른 글

HTTP Response Code  (0) 2008.11.10
[HTML] clientWidth, offsetWidth, scrollWidth 개념 정리  (0) 2008.07.25
[Eclipse] 단축키 모음  (0) 2008.07.18
[JS] Event Keycode 목록  (0) 2008.07.15

태그

댓글 0