offset그룹============================================================================
내용: offsetLeft, offsetTop의 기준 좌표계가 될 컨테이너 엘리먼트 일반적인 경우 = Document
동적인 위치의 경우=동적위치가 적용된 상위 엘리먼트
jQuery -offsetParent()
javascript-(Element) offsetParent()
내용- 엘리먼트의 너비 높이( 단 margin제외, border, padding, scrollBar포함 )
jQuery - outerWidth(), outerHeight()
javascript-(int) offsetWidth, offsetHeight
내용-컨테이너(offsetParent)를 기준으로 엘리먼트가 위치한x,y좌표
jQuery - position().left, position().top
javascript-(int) offsetLeft, offsetTop
scroll그룹==============================================================================
내용-엘리먼트의 너비와 높이( 단 overflow:scroll인 경우 화면에 보이지 않는 영역까지 포함됨.
이러한 경우 offsetWidth, offsetHeight보다 scoll값이 큼 )
jQuery - 없음
javascript- ( int ) scrollWidth, scrollHeight
내용- 스크롤된 x, y값
jQuery- scrollLeft(), scrollTop()
javascript- ( int ) scrollLeft, scrollTop
client그룹==============================================================================
내용- 엘리먼트 내부의 클라이언트 영역의 너비와 높이( 단 margin, border, padding, scrollBar제외 )
jQuery-없음
javascript- ( int ) clientWidth, clientHeight
내용- 엘리먼트 내부의 클라이언트가 위치한 x,y 좌표( border값과 같음 )
jQuery-없음
javascript- ( int ) clientLeft, clientTop
내용-Document를 기준으로 엘리먼트의 left, top, right, bottom, width, height를 모두 알아낼 수 있음.
jQuery-offset().left, offset().top
javascript- ( int ) getBoundingClientRect()
내용-style에 작성된 너비와 높이
jQuery-width(), height()
javascript-없음
내용-엘리먼트의 너비와 높이( 단 margin과 border 제외, padding과 scrollBar포함)
jQuery-innerWidth(), innerHeight()
javascript-없음