TI이야기

페이지의 중앙위치 구하려면 폭(width)과 높이(height)를 먼저 알아야 한다.

그러면 팝업이나, 알림 창을 배치하는데 사용할 수 있다.

원하는 값을 돌려준 것은

document.documentElement.clientWidth ,document.documentElement.clientHeight

window.innerWidth, window.innerHeight

Chrome> 보기> 개발자정보> 개발자도구> console 탭

or

현재 페이지, 오른쪽 마우스 클릭> 검사> console 탭

에서 값을 확인 했다. 

개발자도구를 열었기때문에 폭은 줄어든 값으로 가져와야한다.

# 현재 페이지의 폭(width)을 기대했으나 결과는

> document.width

> undefined

> document.height

> undefined

# 현재 페이지의 body에서 폭을 가져온다.

> document.body.clientWidth

> 600

> document.body.clientHeight

> 2363

# 현재 페이지의 html에서 폭을 가져온다. - 원하는 값이다.

> document.documentElement.clientWidth

> 600

> document.documentElement.clientHeight

> 604

# Window의 폭을 가져온다. - 원하는 값이다.

> window.innerWidth

> 600

> window.innerHeight

> 604

# 컴퓨터 화면의 폭, 높이를 가져온다.

> window.screen.width

> 1200

> window.screen.height

> 800

출처>

모질라 개발자 사이트

Document.width

https://developer.mozilla.org/en-US/docs/Web/API/Document/width

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Note: Starting in Gecko 6.0, document.width is no longer supported. Instead, use document.body.clientWidth. See element.clientWidth.

Element.clientWidth

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).

Window.innerWidth

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present.

More precisely, innerWidth returns the width of the window's layout viewport. The interior height of the window—the height of the layout viewport—can be obtained from the innerHeight property.