html element 위치 값

 

 

 

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-없음

원문 : http://jbc2119.tistory.com/99