웹 페이지의 보이는 영역 너비 : Document.body.clientWidth
웹 페이지의 보이는 영역 높이 : document.body.clientHeight
웹 페이지의 보이는 영역 너비 : document.body.offsetwidth (가장자리 선의 너비 포함)
웹 페이지의 보이는 영역 높이 : Document.body.offSetheight (가장자리 라인의 너비 포함)
웹 페이지의 전체 텍스트 너비 : document.body.scrollwidth
웹 페이지의 전체 텍스트 : document.body.scrollheight
웹 페이지는 높은 수준으로 롤아웃됩니다 : document.body.scrolltop
롤아웃중인 웹 페이지의 왼쪽 : document.body.scrollleft
웹 페이지의 기본 부분 : Window.screentop
웹 페이지의 본문 왼쪽 : Window.screenLeft
높은 화면 해상도 : Window.Screen.height
화면 해상도의 너비 : Window.Screen.width
사용 가능한 작업 공간 높이 : Window.Screen.availHeight
사용 가능한 작업 공간 너비 : Window.Screen.availWidth
HTML 정확한 위치 : scrollleft, scrollwidth, clientwidth, offsetwidth
ScrollHeight : 물체의 스크롤 높이를 가져옵니다.
scrollleft : 객체의 왼쪽 경계와 창에서 현재 보이는 컨텐츠의 왼쪽 끝 사이의 거리를 설정하거나 얻습니다.
SCROLLTOP : 객체의 상단과 창에서 보이는 내용의 상단 사이의 거리를 설정하거나 얻습니다.
scrollwidth : 객체의 스크롤 너비를 가져옵니다
Offestheight : 부모 좌표 오프셋 튼튼한 속성에 의해 지정된 레이아웃 또는 부모 좌표에 대한 객체의 높이를 가져옵니다.
OffsetLeft : 오프셋 튼튼한 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대해 객체의 계산 된 왼쪽 위치를 가져옵니다.
OffsetTop : 오프셋 탑 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대해 객체의 계산 된 상단 위치를 가져옵니다.
event.clientx 문서에 대한 수평 좌표
event.clienty 수직 좌표 문서와 관련하여
event.offsetx 컨테이너에 대한 수평 좌표
이벤트. 오프 세트 수직 좌표 컨테이너와 관련하여
document.documentElement.scrolltop 수직 스크롤 값의 값
event.clientx + document.documentElement.scrolltop 문서의 수평 좌표와 관련하여 + 수직 방향으로 스크롤하는 양
즉, Firefox 차이는 다음과 같습니다.
IE6.0, FF1.06+:
clientWidth = 너비 + 패딩
ClientHeight = 높이 + 패딩
offsetwidth = width + padding + 테두리
OffSetheight = 높이 + 패딩 + 테두리
IE5.0/5.5 :
clientWidth = 너비 - 테두리
ClientHeight = 높이 - 테두리
offsetWidth = 너비
Offestheight = 높이
(CSS의 여백 속성은 ClientWidth, OffsetWidth, ClientHeight 및 Offestheight와 관련이 없음을 언급해야합니다.
－－－－－－－－－－－－－－－－－－－－－－－－－－
기술 하이라이트
이 섹션의 코드는 주로 창에 대한 문서 개체의 일부 속성을 사용합니다.
창 크기를 얻으려면 다른 브라우저에 다른 속성과 메소드를 사용해야합니다. 창의 실제 크기를 감지하려면 Netscape의 창 속성을 사용해야합니다. 신체; DOM에서는 창의 크기를 얻으려면 요소가 아닌 루트 요소의 크기에주의를 기울여야합니다.
창 객체의 내면 속성에는 현재 창의 내부 너비가 포함됩니다. 창 객체의 내부 속성에는 현재 창의 내부 높이가 포함됩니다.
문서 개체의 본문 속성은 HTML 문서의 태그에 해당합니다. 문서 개체의 DocumentElement 속성은 HTML 문서의 루트 노드를 나타냅니다.
document.body.clientHeight는 HTML 문서가있는 창의 현재 높이를 나타냅니다. document.body.clientWidth는 HTML 문서가있는 창의 현재 너비를 나타냅니다.
Implementation code <!―――――――――――――――――――――――――――――――――――――――――――――― - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ---
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 전환 // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> 브라우저 창을 조정하십시오 </title>
<meta http-equiv = "content-type"content = "text/html; charset = gb2312">
</head>
<body>
<h2 align = "center"> 브라우저 창 크기 </h2> <hr>를 조정하십시오
<form action = "#"method = "get"name = "form1"id = "form1">
<! 브라우저 창의 실제 크기를 표시하십시오
브라우저 창의 실제 높이 : <입력 유형 = "텍스트"이름 = "availHeight"size = "4"> <br>
브라우저 창의 실제 너비 : <input type = "text"name = "avidewidth"size = "4"> <br>
</form>
<script type = "text/javaScript">
<!
var winwidth = 0;
var winheight = 0;
함수 findDimensions () // 함수 : 치수를 얻습니다
{
// 창 너비를 얻습니다
if (window.innerWidth)
winwidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winwidth = document.body.clientWidth;
// 창 높이를 얻습니다
if (window.innerheight)
Winheight = Window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winheight = document.body.clientHeight;
// 문서 내부의 몸을 감지하여 창 크기를 클릭하여 신체 크기를 얻습니다.
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winheight = document.documentElement.clientHeight;
winwidth = document.documentElement.clientWidth;
}
// 결과는 두 개의 텍스트 상자로 출력됩니다
document.form1.availheight.value = winheight;
document.form1.availwidth.value = winwidth;
}
findDimensions ();
// 값을 얻기 위해 함수를 호출합니다
Window.onresize = findimensions;
///
</스크립트>
</body>
</html>
소스 프로그램 해석
(1) 프로그램은 먼저 창의 현재 너비와 높이를 표시하기 위해 두 개의 텍스트 상자가 포함 된 양식을 작성하며, 창 크기의 변경에 따라 그 값이 변경됩니다.
(2) 후속 JavaScript 코드에서, 두 변수 Winwidth와 Winheight는 먼저 창의 높이와 너비 값을 절약하기 위해 정의됩니다.
(3) 그런 다음, findDimensions ()에서 Window.innerHeight 및 Window.innerWidth를 사용하여 창의 높이와 너비를 얻고 위의 두 변수에 두 가지를 모두 저장하십시오.
(4) 그런 다음 문서에 깊이 들어가서 신체를 감지하고 창 크기를 얻고 위의 두 변수에 저장함으로써.
(5) 함수의 끝에서 결과는 양식 요소에 이름으로 액세스하여 두 개의 텍스트 상자로 출력됩니다.
(6) JavaScript 코드가 끝나면 findDimensions () 함수를 호출하여 전체 작업을 완료하십시오.