1. jQuery 에서 제공하는 엘리먼트의 위치 및 크기와 관련된 프로퍼티와 메서드
그룹
| jQuery 프로퍼티/메서드
| javascript DOM/프로퍼티/메서드
| 내용
| offset 그룹
| offsetParent()
| Elment
offsetParent
| offsetLeft, offsetTop의 기준 좌표계가 될 컨테이너 엘리먼트
일반적인 경우:Document
동적 위치인 경우:동적 위치가 적용된 상위 엘리먼트
| outerWidth()
outerHeigh()
| int
offsetWidth,
offsetHeight
| 엘리먼트의 너비와 높이
(단 margin 제외, border, padding,scrollBar포함)
| position().left
position().top
| int
offsetLeft,
offsetTop
| 컨테이너(offsetPanrent) 를 기준으로 엘리먼트가 위치한 x,y좌표
| scroll그룹
| -
| int
scrollWidth,
scrollHeight
| 엘리먼트의 너비와 높이
(단 overflow:scroll인 경우 화면에 보이지 않는 영역까지 포함됨. 이런한 경우 offsetWidth, offsetHeight보다는 scroll 값이 큼.)
| scrollLeft()
scrollTop()
| int
scrollLeft,
scrollTop
| 스크롤된 x,y값
| client그룹
| -
| int
clientWidth,
clientHeight
| 엘리먼트 내부의 클라이언트 영역의 너비와 높이(단 margin, border, padding, scrollBar 제외)
| -
| int
clientLeft,
clientTop
| 엘리먼트 내부의 클라이언트가 위치한 x,y좌표(border 값과 같음)
| offset().left
offset().top
| getBoundingClientRect()
| Document를 기준으로 엘리먼트의 left, top, right, bottom, width, height를 모두 알아낼 수있음
| width()
height()
| -
| style에 작성된 너비와 높이
| innerWidth()
innerHeight()
| -
| 엘리먼트의 너비와 높이(단 margin와 border제외, padding과 scrollBar(포함)
|
2. jQuery 에서 제공하는 window 객체와 관련된 프로퍼티와 메서드
jquery 프로퍼티/메서드
| DOM 프로퍼티/메서드
| 내용
| -
| int
innerWidth,
innerHeight
| window 너비와 높이(단 메뉴바와 툴바 제외, 스크롤바 크기 포함)
| -
| int
outerWidth,
outerHeight
| window 너비와 높이(단 메뉴바,툴바,스크롤바 포함)
| -
| int
pageXOffset,
pageYOffset
| 스크롤된 x,y값
| -
| int
screenLeft,
screenTop
| 브라우저의 좌측 상단 모서리에 대한 x,y좌표
| -
| int
screenX,
screenY
| 브라우저의 좌측 상단 모서리에 대한 x,y좌표
| -
| scrollTo(posX,posY)
| posX,posY으로 스크롤
| -
| scrollBy(dx,dy)
| 현재 스크롤 값에서 dx,dy만큼의 스크롤
| $(window).width()
| -
| window 너비(단 메뉴바,툴바, 스크롤바 크기 제외)
| $(window).hight()
| -
| window 너비(단 메뉴바,툴바, 스크롤바 크기 제외)
|
3.jQuery 에서 제공하는 Document객체와 관련된 프로퍼티와 메서드
jQuery 프로퍼티/메서드
| DOM 프로퍼터/메서드
| 내용
| $(document).width()
| document.body.scrollWidth
| document 영역의 전체너비
| $(document).height()
| document.body.scrollHeight
| document 영역의 전체 높이
| -
| Element
elementFromPoint(float x, float y)
| x, y 위치에 있는 엘리먼트
|
4. jQuery 에서 제공하는 Screen 객체와 관련된 프로퍼티와 메서드
jQuery 프로퍼티/메서드
| DOM 프로퍼터/메서드
| 내용
| -
| int
availWidth,
availHeight
| 작업표시줄을 제외한 화면크기
| -
| int
width,
height
| 작업표시줄을 포함한 전체 화면 크기
|
5. jQuery 에서 제공하는 MouseEvent의 위치 및 크기와 관련된 프로퍼티와 메서드
jQuery 프로퍼티/메서드
| DOM 프로퍼터/메서드
| 내용
| int
clientX,
clientY
| int
clientX,
clientY
| 컨테이너가 아닌 브라우저의 화면상 가장 위쪽 지점을 기준으로 한 마우스 포인터의 x,y위치, 스크롤 이동 값은 무시됨.
| int
pageX,
pageY
| int
pageX,
pageY
| clientX, clientY와 같지만 문서가 스크롤되는 경우, 스크롤된 부분까지 호함한 마우스 포인터의 x,y위치
| int
offsetX,
offsetY
| int
offsetX,
offsetY
| 이벤트가 발생한 element 내부의 마우스 포인터의 x,y위치(local x,y로 이해하면 됨)
| int
screenX,
screenY
| int
screenX,
screenY
| 사용자 모니터의 상단 좌측 지점을 기준으로 한 마우스 포인터의 x,y위치
|
|
