clientWidth, offsetWidth, scrollWidth 개념 정리 > script

# *-------------------------------------------------------------------------------*

# 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, css height를 포함한 높이

        * 즉 화면을 봤을 때 보여지는 엘리먼트의 높이

[관련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