window ,document offset (프로퍼티와 메소드)

Window 객체의 위치 프로퍼티와 메소드

window객체는 BOM(Browser Object Model)객체의 최상위 객체로서 웹페이지가 열려 있을때의 window창과 관련된 위치 및 크기와 관련된 프로퍼티와 메소드를 알아보자.

프로퍼티 / 메소드	내 용
innerWidth, innerHeight	메뉴바, 툴바, 스크롤바의 크기를 제외한 window의 넓이와 높이
outerWidth, outerHeight	메뉴바, 툴바, 스크롤바의 크기를 포함한 window의 넓이와 높이
pageXOffset, pageYOffset	윈도우창에서 스크롤이 있는 페이지라면 스크롤된 x, y 좌표값
screenLeft, screenTop	window창이 screen(0,0)인 좌표에서 떨어진 브라우저의 상단 모서리인 x, y 값 (단, 파이어폭스 지원X)
screenX, screenY	상동 ( 파이어폭스 지원O)
scrollTo(posX, posY)	posX, posY 값으로 스크롤 이동
scrollBy(x, y)	현재 스크롤바가 있는 위치에서 x, y인 넘겨준 값인 좌표만큼만 이동

window 크기 구하기

윈도우 크기는 기본크기에 메뉴바와 툴바 그리고 스크롤바 영역이 조합된 크기로 구성되어 있으며 윈도우와 관련된 크기는 세 가지로 나눌 수 있습니다.

1. 기본 크기

• window.innerWidth & window.innerHeight 로 웹 브라우저의 메뉴바와 툴바, 스크롤바 등이 전혀 포함되지 않은 윈도우 내부 영역의 크기입니다.>

2. 기본 크기 + 메뉴바 + 툴바 영역이 포함된 크기

• $(window).width() & $(window).height() 로 윈도우 내부크기에 메뉴바와 툴바 영역이 포함된 크기입니다.

3. 기본크기 + 메뉴바 + 툴바 + 스크롤바 영역이 포함된 크기

• window.outerWidth & window.outerHeight 로 윈도우 크기에 메뉴바, 툴바 그리고 스크롤바 영역까지 포함된 크기입니다.

위의 세가지 설명에 대한 내용을 다음의 그림을 통해 참조해 보세요.

See the Pen widow 크기 구하기 by jaeheekim (@jaehee) on CodePen.

위의 코드펜의 결과창 소스에서는 제대로 확인할 수 없으니 본인의 로컬에서 html, css, js 를 테스트 해보세요~

웹 브라우저 창을 변화시키면서 새로고침을 하면서 값의 변화를 확인하세요.

Document 객체의 위치 프로퍼티와 메소드

Document의 크기와 관련된 프로퍼티는 따로 제공되지는 않지만 HTMLElement의 body 프로퍼티인 scrollWidh, scrollHeight를 이용하여 넓이와 높이를 구할 수가 있다.

그리고 elementFromPoint() 메소드를 이용하면 마우스 포인터의 x, y 위치에 있는 엘리먼트를 구할 수가 있다.

프로퍼티 / 메소드	내 용
document.body.scrollWidth	Document 영역의 전체 넓이 주의 : 문서상의 넓이인 점을 기억 ( 문서 > 브라우저 ) 브라우저에 스크롤이 있다면 window창보다 document가 더 크다
document.body.scrollHeight	Document 영역의 전체 높이
elementFromPoint(x, y)	x, y 위치에 있는 엘리먼트

[파일 참고(딴동네)]

window_properties_methods.html

document_properties_methods.html

Jaehee's WebClub