오프셋상단
offsetParent 속성으로 지정된 레이아웃 또는 부모 좌표를 기준으로 계산된 개체의 위쪽 위치를 가져옵니다.
오프셋왼쪽
offsetParent 속성으로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 개체의 왼쪽 위치를 가져옵니다.
오프셋 높이
offsetParent 속성으로 지정된 레이아웃이나 상위 좌표를 기준으로 개체의 높이를 가져옵니다.
IE와 Opera는 offsetHeight = clientHeight + 스크롤 막대 + 테두리라고 믿습니다.
NS와 FF는 offsetHeight를 웹페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다.
오프셋 너비
offsetParent 속성으로 지정된 레이아웃이나 상위 좌표를 기준으로 개체의 너비를 가져옵니다.
오프셋부모
개체의 offsetTop 및 offsetLeft 속성을 정의하는 컨테이너 개체에 대한 참조를 가져옵니다.
클라이언트 높이
개체에 적용될 수 있는 여백, 테두리, 스크롤 막대 또는 패딩을 계산하지 않고 개체의 높이를 가져옵니다.
clientHeight에 대해서는 누구나 이의가 없습니다. 모두가 콘텐츠가 보이는 영역의 높이라고 생각하는데, 이는 일반적으로 페이지 브라우저에서 콘텐츠를 볼 수 있는 영역의 높이를 의미합니다. 마지막 도구 모음과 상태 표시줄 위에는 페이지 내용과 아무 관련이 없습니다.
클라이언트왼쪽
offsetLeft 속성과 클라이언트 영역의 실제 왼쪽 사이의 거리를 가져옵니다.
클라이언트상단
offsetTop 속성과 클라이언트 영역의 실제 상단 사이의 거리를 가져옵니다.
클라이언트 너비
개체에 적용될 수 있는 여백, 테두리, 스크롤 막대 또는 패딩을 계산하지 않고 개체의 너비를 가져옵니다.
스크롤 속성
스크롤
스크롤이 꺼졌는지 여부를 설정하거나 가져옵니다.
스크롤 높이
객체의 스크롤 높이를 가져옵니다.
스크롤왼쪽
개체의 왼쪽 가장자리와 창에 현재 표시되는 콘텐츠의 가장 왼쪽 가장자리 사이의 거리를 설정하거나 가져옵니다.
스크롤탑
개체 상단과 창에 표시되는 콘텐츠 상단 사이의 거리를 설정하거나 가져옵니다.
스크롤 너비
개체의 스크롤 너비를 가져옵니다. 이벤트 속성
엑스
부모 문서를 기준으로 마우스 포인터 위치의 x 픽셀 좌표를 설정하거나 가져옵니다.
스크린X
사용자 화면을 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다.
오프셋X
이벤트를 트리거한 개체를 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다.
클라이언트X
창의 클라이언트 영역을 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다. 여기서 클라이언트 영역에는 창 자체 컨트롤과 스크롤 막대가 포함되지 않습니다.
여기서는 document.body의 clientHeight, offsetHeight 및 scrollHeight에 대한 네 가지 브라우저의 해석에 대해 설명합니다. 여기서는 HTML 컨트롤인 경우 다릅니다.
이 네 가지 브라우저는 IE(Internet Explorer), NS(Netscape), Opera 및 FF(FireFox)입니다.
클라이언트 높이
clientHeight에 대해서는 누구나 이의가 없습니다. 모두가 콘텐츠가 보이는 영역의 높이라고 생각하는데, 이는 일반적으로 페이지 브라우저에서 콘텐츠를 볼 수 있는 영역의 높이를 의미합니다. 마지막 도구 모음과 상태 표시줄 위에는 페이지 내용과 아무 관련이 없습니다.
오프셋 높이
IE와 Opera는 offsetHeight = clientHeight + 스크롤 막대 + 테두리라고 믿습니다. NS와 FF는 offsetHeight를 웹페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다.
스크롤 높이
IE와 Opera는 scrollHeight를 웹 페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다. NS 및 FF는 scrollHeight를 웹 페이지 콘텐츠의 높이로 간주하지만 최소값은 clientHeight입니다. 간단히 말해서
clientHeight는 브라우저를 통해 콘텐츠가 표시되는 영역의 높이입니다.
NS와 FF는 offsetHeight와 scrollHeight가 모두 웹 콘텐츠 높이라고 생각하지만, 웹 콘텐츠 높이가 clientHeight보다 작거나 같은 경우 scrollHeight의 값은 clientHeight이고 offsetHeight는 clientHeight보다 작을 수 있습니다.
IE와 Opera는 offsetHeight를 가시 영역 clientHeight 스크롤 막대와 테두리로 간주합니다. scrollHeight는 웹페이지 콘텐츠의 실제 높이입니다.
같은 이유
clientWidth, offsetWidth 및 scrollWidth에 대한 설명은 위와 동일하며 높이를 너비로 바꾸면 됩니다.
하지만
FF는 서로 다른 DOCTYPE에서 clientHeight를 다르게 해석하지만 xhtml 1 trasitional은 이를 위와 같이 해석하지 않습니다. 다른 브라우저에는 이 문제가 없습니다.
js는 페이지 높이를 가져옵니다
다음과 같이 코드 코드를 복사합니다.
<스크립트>
함수 getInfo()
{
vars = "";
s += "웹페이지의 가시 영역 너비:"+ document.body.clientWidth;
s += "웹페이지의 가시 영역 높이:"+ document.body.clientHeight;
s += "웹 페이지의 가시 영역 너비: "+ document.body.offsetWidth + "(가장자리 및 스크롤 막대의 너비 포함)";
s += "웹 페이지의 가시 영역 높이: "+ document.body.offsetHeight + "(옆선 너비 포함)";
s += "웹 페이지 텍스트의 전체 텍스트 너비:"+ document.body.scrollWidth;
s += "웹 페이지 본문의 전체 텍스트 높이:"+ document.body.scrollHeight;
s += "웹페이지가 스크롤되는 높이(ff):"+ document.body.scrollTop;
s += "웹페이지가 스크롤되는 높이(즉):"+ document.documentElement.scrollTop;
s += "웹페이지 왼쪽이 스크롤됩니다:"+ document.body.scrollLeft;
s += "웹페이지 본문: "+ window.screenTop;
s += "웹페이지 텍스트 부분 왼쪽:"+ window.screenLeft;
s += "화면 해상도의 높이:"+ window.screen.height;
s += "화면 해상도 너비:"+ window.screen.width;
s += "화면 사용 가능한 작업 영역 높이:"+ window.screen.availHeight;
s += "화면 사용 가능한 작업 영역 너비:"+ window.screen.availWidth;
s += "화면 설정은 "+ window.screen.colorDepth +" 비트 색상입니다.";
s += "화면 설정" + window.screen.deviceXDPI +" 픽셀/인치";
//경고(들);
}
getInfo();
</script>
내 로컬 테스트에서:
IE, FireFox, Opera에서 사용할 수 있습니다.
document.body.clientWidth
document.body.clientHeight
사용 가능하고 간단하며 편리합니다.
그리고 회사 프로젝트 중:
오페라는 아직도 사용하고 있다
document.body.clientWidth
document.body.clientHeight
하지만 IE와 FireFox는
document.documentElement.clientWidth
document.documentElement.clientHeight
W3C 표준이 문제를 일으키는 것으로 밝혀졌습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
이 태그 줄을 페이지에 추가하면
IE에서:
document.body.clientWidth ==> BODY 개체 너비
document.body.clientHeight ==> BODY 개체 높이
document.documentElement.clientWidth ==> 표시 영역 너비
document.documentElement.clientHeight ==> 표시 영역 높이
FireFox에서:
document.body.clientWidth ==> BODY 개체 너비
document.body.clientHeight ==> BODY 개체 높이
document.documentElement.clientWidth ==> 표시 영역 너비
document.documentElement.clientHeight ==> 표시 영역 높이
오페라에서:
document.body.clientWidth ==> 표시 영역 너비
document.body.clientHeight ==> 가시 영역 높이
document.documentElement.clientWidth ==> 페이지 개체 너비(즉, BODY 개체 너비에 여백 너비를 더한 값)
document.documentElement.clientHeight ==> 페이지 개체 높이(즉, BODY 개체 높이 + 여백 높이)
W3C 표준이 정의되어 있지 않으면
IE는 다음과 같습니다
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox는 다음과 같습니다.
document.documentElement.clientWidth ==> 페이지 개체 너비(즉, BODY 개체 너비 + 여백 너비) document.documentElement.clientHeight ==> 페이지 개체 높이(즉, BODY 개체 높이 + 여백 높이)
오페라는:
document.documentElement.clientWidth ==> 페이지 개체 너비(즉, BODY 개체 너비 + 여백 너비) document.documentElement.clientHeight ==> 페이지 개체 높이(즉, BODY 개체 높이 + 여백 높이)
사실 개발 입장에서는 개체와 메소드 수가 적고 최신 표준을 사용하지 않는 것이 훨씬 더 편리할 것입니다.