새로 정의 된 표준에 따라 Document.Documentlement.ClientHeight는 IE와 Firefox에서 올바른 값을 얻을 수 있습니다.
<script language = "javaScript">
함수 getInfo ()
{{
var s = "";
S + = "웹 페이지는 보이는 영역 너비입니다 :" + document.body.clientWidth ;
s + = "웹 페이지 가시 영역 높이 :" + document.body.clientHeight ;
s + = "웹 페이지 가시적 영역 너비 :" + document.body.offsetWidth + "(가장자리와 스크롤 막대의 너비 포함)";
s + = "웹 페이지 가시 영역 높이 :" + document.body.offsetheight + "(가장자리 너비 포함)";
s + = "웹 페이지 텍스트 전문 너비 :" + document.body.scrollwidth;
s + = "웹 페이지 텍스트 높은 텍스트 높이 :" + dcument.body.scrollheight;
웹 페이지에서 롤링 된 s + = "ff) :" + document.body.scrolltop;
S + = "IE) :" + 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 += "화면 설정은" +shine.screen.colordepth +"비트 컬러"입니다.
S += "화면 설정" +Window.Screen.DeviceXDPI +"Pixel/Incon";
경고 (들);
}
getInfo ();
</스크립트>
지역 시험에서 :
IE, Firefox, Opera에서 사용할 수 있습니다
document.body.clientWidth
document.body.clitingHeight
매우 간단하고 편리하게 얻을 수 있습니다.
그리고 회사 프로젝트에서 :
오페라는 여전히 사용됩니다
document.body.clientWidth
document.body.clitingHeight
그러나 IE와 Firefox가 사용됩니다
document.documentElement.clientWidth
Document.DocumentELement.ClientHeight
< !
이 줄을 페이지에 추가하면
IE에서 :
document.body.clientWidth ==> 바디 객체 너비
document.body.clitingheight ==> 바디 객체 높이
document.documentElement.clientWidth ==> 가시 영역 너비
document.documentElement.clientHeight ==> 가시 영역 높이
Firefox에서 :
document.body.clientWidth ==> 바디 객체 너비
document.body.clitingheight ==> 바디 객체 높이
document.documentElement.clientWidth ==> 가시 영역 너비
document.documentElement.clientHeight ==> 가시 영역 높이
오페라 :
document.body.clientWidth ==> 가시 영역 너비
document.body.clitingHeight ==> 가시 영역 높이
document.documentElement.clientWidth ==> 페이지 객체 너비 (즉, 바디 객체의 너비 + 마진 너비)
document.documentElement.clientHeight == >> 페이지 객체 높이 (즉, 신체 객체의 높이 + 마진 높이)
OBJ가 HTML 컨트롤이라고 가정합니다.
OBJ.OffSetTop은 상단 또는 상단 층 제어에서 위치, 정수 및 장치 픽셀을 나타냅니다.
obj.offsetleft는 왼쪽 또는 상단 컨트롤에서 위치, 정수, 단위 픽셀을 나타냅니다.
obj.offsetwidth는 OBJ 컨트롤 자체의 너비, 정수, 단위 픽셀을 나타냅니다.
obj.offsetheight는 OBJ Control 자체의 높이, 정수, 단위 픽셀을 나타냅니다.
앞에서 언급 한 "상부 또는 상부 층"과 "왼쪽 또는 상단 계층"을 설명합니다.
예를 들어:
<div id = "도구">
<입력 유형 = "버튼"value = "제출">
<입력 유형 = "버튼"value = "Reset">
</div>
"제출"버튼의 오프셋 탑은 "공구"레이어의 "도구"레이어 사이의 거리를 나타냅니다.
"재설정"버튼의 오프셋은 "도구"레이어의 "도구"레이어 사이의 거리를 나타냅니다. "도구"층의 상단 프레임에 가장 가까운 가장 가까운 것이기 때문입니다.
"제출"버튼의 오프셋은 "도구"레이어의 왼쪽에 가장 가까운 "도구"레이어의 왼쪽이 왼쪽이기 때문에 "제출"버튼의 "도구"레이어 사이의 거리를 나타냅니다.
"재설정"버튼의 오프셋은 "제출"버튼에서 "제출"버튼의 거리를 나타냅니다. 가장 가까운 "제출"버튼의 오른쪽 프레임은 "제출"버튼의 오른쪽이기 때문입니다.
오프셋 탑은 위 또는 외부 요소에서 HTML 요소의 위치를 가져올 수 있으며,이 둘의 차이는 다음과 같습니다.
1. OffsetTop은 숫자를 반환하고 Style.top은 숫자 외에 문자열을 반환합니다.
2. 오프셋 탑은 읽기 만 읽고 style.top을 읽고 쓸 수 있습니다.
셋째, HTML 요소의 상단 스타일을 지정하지 않으면 Style.top은 빈 문자열을 반환합니다.
OffsetLeft 및 Style.left, OffsetWidth 및 Style.width, OffesTheight 및 Style.head는 동일합니다.
ScrollHeight : 물체의 스크롤 높이를 가져옵니다.
scrollleft : 왼쪽 경계와 객체의 창에서 현재 보이는 컨텐츠의 왼쪽 끝 사이에서 거리를 설정하거나 얻습니다.
스크롤 탑 : 물체의 상단과 창의 창 상단 사이의 거리를 설정하거나 얻습니다.
scrollwidth : 객체의 스크롤 너비를 가져옵니다
OffesTheight : 획득 객체에 의해 오프셋 튼튼한 속성에 의해 지정된 상위 좌표의 높이
OffsetLeft : 오프셋 래피트 속성에 의해 지정된 가부장적 좌표의 가부장적 좌표의 왼쪽 위치 계산.
OffsetTop : OffsetTop 속성에 의해 지정된 패턴의 가부장적 좌표 계산의 최상위 위치
event.clientx의 상대 문서의 수평 좌표
event.clienty의 상대 문서의 수직 좌표
event.offsetx 상대 컨테이너의 수평 좌표
event.offsety의 수직 좌표
Document.documenetElement.scrolltop Valled Valley Rolling Valley
event.clientx+document.documentElement.scrolltop 상대 문서의 수평 시트 레이블+롤링 수직 롤링 양
위의 내용은 주로 IE의 Firefox 간의 차이를 나타냅니다.
IE6.0, FF1.06+:
clientWidth = 너비 + 패딩
ClientHeight = 높이 + 패딩
offsetwidth = width + padding + 테두리
OffSetheight = 높이 + 패딩 + 테두리
IE5.0/5.5 :
clientWidth = width -border
ClientHeight = height -border
offsetWidth = 너비
Offestheight = 높이
(언급 필요 : CSS의 여백 속성은 ClientWidth, OffsetWidth, ClientHeight, OfficeTheight와 관련이 없습니다)