1. element.offsetWidth, element.offsetHeight
1) element.offsetWidth와 element.offsetHeight는 W3C권고안이 아님 (MSIE's DHTML Object Model)
2) element.offsetWidth : element의 border, 수직/수평 padding, css width를 포함한폭
* 즉 화면을 봤을 때 보여지는 엘리먼트의 폭
3) element.offsetHeight : element의 border, 수직/수평 padding, cssheight를포함한 높이
* 즉 화면을 봤을 때 보여지는 엘리먼트의 높이
[관련URL] offsetWidth : http://developer.mozilla.org/en/docs/DOM:element.offsetWidth
[관 련URL] offsetHeight : http://developer.mozilla.org/en/docs/DOM:element.offsetHeight
2. element.clientWidth, element.clientHeight
1) W3C 표준 아님 (MSIE의 DHTML Object Model)
2) element.clientWidth : element의 border를 뺀 안쪽 폭
* 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 안쪽 폭
3) element.clientHeight : element의 border를 뺀 안쪽 높이
* 즉 화면을 봤을 때 테두리를뺀 엘리먼트의 안쪽 높이
[관련URL] clientWidth : http://developer.mozilla.org/en/docs/DOM:element.clientWidth
[관 련URL] clientHeight : http://developer.mozilla.org/en/docs/DOM:element.clientHeight
3. element.scrollWidth, element.scrollHeight
1) W3C 권고안이 아님
2) element.scrollWidth : 엘리먼트의 스크롤 폭
3) element.scrollHeight : 엘리먼트의 스크롤 높이
[관련URL] element.scrollWidth : http://developer.mozilla.org/en/docs/DOM:element.scrollWidth
[관 련URL] element.scrollHeight : http://developer.mozilla.org/en/docs/DOM:element.scrollHeight
1. element.offsetWidth, element.offsetHeight
1) element.offsetWidth와 element.offsetHeight는 W3C권고안이 아님 (MSIE's DHTML Object Model)
2) element.offsetWidth : element의 border, 수직/수평 padding, css width를 포함한폭
* 즉 화면을 봤을 때 보여지는 엘리먼트의 폭
3) element.offsetHeight : element의 border, 수직/수평 padding, cssheight를포함한 높이
* 즉 화면을 봤을 때 보여지는 엘리먼트의 높이
[관련URL] offsetWidth : http://developer.mozilla.org/en/docs/DOM:element.offsetWidth
[관 련URL] offsetHeight : http://developer.mozilla.org/en/docs/DOM:element.offsetHeight
2. element.clientWidth, element.clientHeight
1) W3C 표준 아님 (MSIE의 DHTML Object Model)
2) element.clientWidth : element의 border를 뺀 안쪽 폭
* 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 안쪽 폭
3) element.clientHeight : element의 border를 뺀 안쪽 높이
* 즉 화면을 봤을 때 테두리를뺀 엘리먼트의 안쪽 높이
[관련URL] clientWidth : http://developer.mozilla.org/en/docs/DOM:element.clientWidth
[관 련URL] clientHeight : http://developer.mozilla.org/en/docs/DOM:element.clientHeight
3. element.scrollWidth, element.scrollHeight
1) W3C 권고안이 아님
2) element.scrollWidth : 엘리먼트의 스크롤 폭
3) element.scrollHeight : 엘리먼트의 스크롤 높이
[관련URL] element.scrollWidth : http://developer.mozilla.org/en/docs/DOM:element.scrollWidth
[관 련URL] element.scrollHeight : http://developer.mozilla.org/en/docs/DOM:element.scrollHeight
scrollHeight
스크롤 시키지 않았을때의 전체 높이를 구한다.Mozilla Developer Center의 그림예제를 보면 쉽게 이해할 수 있다.

clientheight
눈에 보이는 많큼의 높이를 구한다.Mozilla Developer Center의 그림예제를 보면 쉽게 이해할 수 있다.

scrollTop
스크롤되어 올라간 많큼의 높이를 구한다.Mozilla Developer Center의 그림예제를 보면 쉽게 이해할 수 있다.

브라우저별 차이점
scrollHeight / clientheight / scrollTop 모두 W3C의 표준이 아니며 브라우저별로 다르게 표현된다.같은 효과를 내더라도 경우(Dtd 여부와 종류, 수직 가운데 정렬 등)에 따라서 0~40픽셀 이상의 차이가 생길 수 있으며 올바르게 적용되는 속성과 잘못 적용되는 속성이 뒤섞여있다.
Dtd Standard Mode
source | IE 7.0 | IE 6.0 | IE 5.5 | Firefox 3 | Safari 4 beta |
---|---|---|---|---|---|
document.body.scrollHeight | 1519 | 1519 | 1549 | 1516 | 1540 |
document.documentElement.scrollHeight | 1549 | 1549 | 897 | 1540 | 1540 |
document.body.clientHeight | 1519 | 1519 | 893 | 1516 | 1516 |
document.documentElement.clientHeight | 856 | 879 | 0 | 863 | 893 |
document.body.scrollTop | 0 | 0 | 843 | 0 | 831 |
document.documentElement.scrollTop | 882 | 857 | 0 | 845 | 0 |
Dtd Quirks Mode
source | IE 7.0 | IE 6.0 | IE 5.5 | Firefox 3 | Safari 4 beta |
---|---|---|---|---|---|
document.body.scrollHeight | 1549 | 1549 | 1549 | 1540 | 1540 |
document.documentElement.scrollHeight | 858 | 883 | 897 | 1540 | 1540 |
document.body.clientHeight | 854 | 879 | 893 | 863 | 893 |
document.documentElement.clientHeight | 0 | 0 | 0 | 1540 | 1540 |
document.body.scrollTop | 1031 | 1006 | 992 | 987 | 987 |
document.documentElement.scrollTop | 0 | 0 | 0 | 0 | 0 |
document.documentElement는 Dtd가 Standard Mode일 때,
document.body는 Dtd가 Quirks mode일때 사용하여 값을 구한다.
문제는,
Standard Mode를 사용해도 Quirks mode로 표현하는 IE5.5와,
Standard Mode를 사용해도 document.documentElement.scrollTop는 0을 반환하고 document.body.scrollTop만 제대로 가져오는 Safari 4 beta에 있다.
이에 대한 해결책으로는 몇가지가 있다.
scrollHeight / clientheight
Standard Mode일때에는 document.documentElement를 사용하고,Quirks mode일때에는 document.body를 사용하여 값을 반환하는 방법.
조건연산자 사용
var sheight = document.compatMode == "CSS1Compat" ? document.documentElement.scrollHeight : document.body.scrollHeight;
var cheight = document.compatMode == "CSS1Compat" ? document.documentElement.clientheight : document.body.clientheight;
var cheight = document.compatMode == "CSS1Compat" ? document.documentElement.clientheight : document.body.clientheight;
조건문 if 사용
if (!document.compatMode || document.compatMode == 'BackCompat') {
var sheight = document.body.scrollHeight;
var cheight = document.body.clientheight;
} else {
var sheight = document.documentElement.scrollHeight;
var cheight = document.documentElement.clientheight;
}
var sheight = document.body.scrollHeight;
var cheight = document.body.clientheight;
} else {
var sheight = document.documentElement.scrollHeight;
var cheight = document.documentElement.clientheight;
}
Standard Mode일때 IE5.5에만 document.body를 사용하는 방법
navigator.userAgent로 브라우저 종류 판별
if (navigator.userAgent.indexOf("MSIE 5.5")!=-1) {
var sheight = document.body.scrollHeight;
var cheight = document.body.clientheight;
} else {
var sheight = document.documentElement.scrollHeight;
var cheight = document.documentElement.clientheight;
}
var sheight = document.body.scrollHeight;
var cheight = document.body.clientheight;
} else {
var sheight = document.documentElement.scrollHeight;
var cheight = document.documentElement.clientheight;
}
scrollTop
Dtd의 Standard / Quirks Mode를 구분지어 얻어낸 값으로는 제대로 사용 할 수 없다.사파리4베타가 Standard Mode에서 document.documentElement.scrollTop를 제대로 반환하지 않기 때문이다.
속성을 제대로 사용하지 못하면 값을 전부 0으로 반환하므로, 다음과 같이 사용할 수 있다.
if (document.body.scrollTop == 0) {
var top = document.documentElement.scrollTop;
} else {
var top = document.body.scrollTop;
}
var top = document.documentElement.scrollTop;
} else {
var top = document.body.scrollTop;
}
scrollTop이 실제로 0일 경우, document.body.scrollTop나 document.documentElement.scrollTop의 값을 제대로 반환하든 잘못 반환하든 어차피 0을 반환하므로 잘못 계산되지는 않는다.
'개발 > JavaScript' 카테고리의 다른 글
javascript 파일 업로드 사이즈 체크 (0) | 2010.09.20 |
---|---|
자바스크립트 객체(?)처럼 사용하기 (0) | 2010.07.28 |
Javascript DOM Operation Examples (0) | 2010.06.10 |
input box 언어설정, (0) | 2010.05.06 |
브라우져, element 크기 (0) | 2010.04.16 |
scrollHeight / clientHeight / scrollTop (0) | 2010.04.16 |