HTML Element 객체에서 제공하는 크기 및 위치 프로퍼티와 메소드

HTML Element 객체

HTML Element 겍체는 다섯 객체(window객체, document객체, html element객체,screen객체, mouseEvent객체)중에 위치 및 크기와 관련된 프로퍼티와 메소드를 가장 많이 포함한 객체이며 브라우저 화면에 보이는 대부분의 객체는 HTMLElement객체를 상속받았기 때문에 동적으로 요소를 움직여야 하는 경우 대부분이 이 객체의 프로퍼티와 메소드를 사용한다.

그룹	프로퍼티 / 메소드	내용
offset 그룹	offsetParent	- offsetLeft, offsetTop의 기준이 되는 부모 엘리먼트
	offsetWidth, offsetHeight	- 해당 엘리먼트의 너비와 높이     ( 보더, 패딩, 스크롤바 포함 단, 마진은 제외)
	offsetLeft, offsetTop	- offsetParent(부모)를 기준으로 한 엘리먼트가 위치한 좌표
scroll 그룹	scrollWidth, scrollHeight	- 해당 엘리먼트의 넓이와 높이     ( 단, overflow:scroll인 경우에는 화면에 보이지 않는 스크롤영역까지 포함되기 때문에 offsetWidth,offsetHeight 값보다 scroll의 값이 더 크게 된다.)
	scrollLeft, scrollTop	- 스크롤된 x, y 좌표값
client 그룹	clientWidth, clientHeight	- 타켓 엘리먼트인 클라이언트 영역의 넓이와 높이     ( 보더,마진을 제외한 내부 넓이와 높이)
	clientLeft, clientTop	- 타켓 엘리먼트인 클라이언트의 border값과 동일     (clientLeft = border-left, clientTop = border-top)

파일 참조 (딴동네)

HTMLElement_location_properties_methods.html