관리 메뉴

엉망진창

offsetWidth, offsetHeight, clientWidth, clientHeight ,scrollWidth, scrollHeight 본문

Study_Web/CSS

offsetWidth, offsetHeight, clientWidth, clientHeight ,scrollWidth, scrollHeight

엉망진창 2010. 2. 17. 18:08

1. element.offsetWidth, element.offsetHeight

   - element.offsetWidth와 element.offsetHeight는 W3C 권고안이 아님. (MSIE's DHTML Object Model)

   - element.offsetWidth : element의 border, padding, css width를 포함한 폭

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

   - element.offsetHeight : element의 border, padding, css height를 포함한 높이

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



2. element.clientWidth, element.clientHeight

   - W3C 표준 아님 (MSIE's DHTML Object Model)

   - element.clientWidth : element의 border를 뺀 안쪽 폭 (padding은 포함하지만 수평스크롤바는 포함하지 않는다.)

      * 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 폭

   - element.clientHeight : element의 border를 뺀 안쪽 높이 (padding은 포함하지만 수직스크롤바는 포함하지 않는다.)

      * 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 높이



3. element.scrollWidth, element.scrollHeight

   - W3C 권고안이 아님

   - element.scrollWidth : 엘리먼트의 스크롤 폭

   - element.scrollHeight : 엘리먼트의 스크롤 높이





참고사항