웹 페이지의 가시 영역 폭: 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: 객체의 롤 너비 가져오기
OffsetHeight: 레이아웃 또는 상위 좌표 offsetParent 속성에 지정된 상위 좌표를 기준으로 객체의 높이 가져오기
OffsetLeft: offsetParent 등록 정보에 지정된 레이아웃 또는 상위 좌표를 기준으로 객체의 계산된 왼쪽 위치 가져오기
OffsetTop: 레이아웃 또는 offsetTop 속성에 지정된 부모 좌표를 기준으로 객체의 계산 최상위 위치 가져오기
Event.clientX 상대 문서의 수평 좌표
문서에 대한 event.clientY 의 수직 좌표
컨테이너와 관련된 event.offsetX 의 수평 좌표
컨테이너와 관련된 event.offsetY 의 수직 좌표
Document.documentelement.scrolltop 수직 스크롤 값
Event.clientx+document.documentelement.scrolltop 문서의 수평 좌표+수직 방향으로 스크롤되는 양
IE, FireFox 차이는 다음과 같습니다.
IE6.0, ff 1.06+:
ClientWidth = width+padding
ClientHeight = height+padding
Offsetwidth = width+padding+border
Offsetheight = height+padding+border
Ie 5.0/5.5:
ClientWidth = width-border
ClientHeight = height-border
Offsetwidth = 폭
OffsetHeight = height
(CSS 의 margin 속성은 clientWidth, offsetWidth, clientHeight, offsetHeight 와 관련이 없습니다.)
웹 페이지의 가시 영역 폭: document.body.clientWidth
웹 페이지의 가시 영역 높이: document.body.clientHeight
웹 페이지의 가시 영역 폭: document.body.offsetWidth (경계 폭 포함)
웹 페이지의 가시 영역 높이: document.body.offsetHeight (경계 높이 포함)
웹 페이지 본문 전체 텍스트 너비: document.body.scrollWidth
웹 페이지 본문 전체 텍스트 높이: document.body.s
CrollHeight
웹 페이지가 굴러가는 높이: document.body.scrollTop
웹페이지가 굴러가는 왼쪽: document.body.scrollLeft
웹 페이지 본문 섹션: window.screenTop
웹 페이지 본문 왼쪽: window.screenLeft
화면 해상도 높음: window.screen.height
화면 해상도 폭: window.screen.width
화면 사용 가능한 작업 공간 높이: window.screen.availHeight
화면 사용 가능한 작업 영역 너비: window.screen.availWidth
---------
기술적 요점
이 코드 섹션에서는 주로 Document 객체의 창에 대한 몇 가지 속성을 사용합니다. 이러한 속성의 주요 기능과 사용법은 다음과 같습니다.
창의 크기를 얻으려면 브라우저마다 다른 속성과 메서드를 사용해야 합니다. 창의 실제 크기를 감지하려면 Netscape 에서 Window 속성을 사용해야 합니다.
에서IE 는 Document 내부에 깊이 들어가 body 를 탐지해야 합니다. DOM 환경에서 창의 치수를 얻으려면 요소가 아닌 루트 요소의 치수에 주의해야 합니다.
Window 객체의 innerWidth 속성에는 현재 창의 내부 너비가 포함되어 있습니다. Window 객체의 innerHeight 속성에는 현재 창의 내부 높이가 포함되어 있습니다.
Document 객체의 body 속성은 HTML 문서의 태그에 해당합니다. Document 객체의 documentElement 속성은 HTML 문서의 루트 노드를 나타냅니다.
Document.body.clientHeight 는 HTML 문서가 있는 윈도우의 현재 높이를 나타냅니다. Document.body. clientWidth 는 HTML 문서가 있는 창의 현재 너비를 나타냅니다.
구현 코드
코드 복사 코드는 다음과 같습니다.
Lt; ! Doctype html public "-//W3C//dtdxhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" gt;
Lt; Html xmlns = "http://www.w3.org/1999/XHTML" gt;
Lt; 헤드 gt;
Lt; 제목 gt; 브라우저 창 lt 를 조정하십시오. /제목 gt;
Lt; 메타 http-equiv = "content-type" content = "text/html; Charset = gb2312 "gt;
Lt; /headgt;
Lt; Bodygt；;
Lt; H2align = "center" gt; 브라우저 창 크기를 조정하십시오. /h2gt; Lt; Hrgt；;
Lt; Formaction = "#" method = "get" name = "form1" id = "form1" gt;
Lt; ! --브라우저 창의 실제 크기 표시---gt；;
브라우저 창의 실제 높이: lt; Input type = "text" name = "availheight" size = "4" gt; Lt; Brgt；;
브라우저 창의 실제 너비: lt; Input type = "text" name = "availwidth" size = "4" gt; Lt; Brgt；;
Lt; /formgt;
Lt; Script type = "text/JavaScript" gt;
Lt; ! -
Varwinwidth = 0;
Varwinheight = 0;
Function findDimensions() // 함수: 치수 가져오기
{
//창 너비 가져오기
If (window.innerWidth)
WinWidth = window.innerWidth；;
Elseif (document.body) amp; Amp；; (document.body.clientwidth)
Winwidth = document.body.clientwidth;
//창 높이 가져오기
If (window.innerHeight)
WinHeight = window.innerHeight；;
Elseif (document.body) amp; Amp；; (document.body.clientheight)
WinHeight = do
Cument.body.clientHeight；;
//Document 내에서 body 를 감지하여 창 크기 가져오기
If (document.documentelement amp; Amp；; Document.documentelement.clientheightamp; Amp；; Document.documentelement.clientwidth)
{
Winheight = document.documentelement.clientheight;
Winwidth = document.documentelement.clientwidth;
}
//두 개의 텍스트 상자로 결과 출력
Document.form1.availheight.value = winheight;
Document.form1.availwidth.value = winwidth;
}
Finddimensions ();
//함수를 호출하여 숫자 값 가져오기
Window.onresize = find dimensions;
//--gt;
Lt; /스크립트 gt;
Lt; /bodygt;
Lt; /html gt;
소스 코드 해석
(1) 프로그램은 먼저 창의 현재 너비와 높이를 표시하는 두 개의 텍스트 상자가 포함된 양식을 작성하며, 그 값은 창 크기에 따라 달라집니다.
(2) 후속 JavaScript 코드에서 창의 높이 및 폭 값을 저장하는 두 개의 변수인 winWidth 와 winHeight 가 먼저 정의되었습니다.
(3) 그런 다음 findDimensions () 함수에서 window.innerHeight 및 window.innerWidth 를 사용하여 창의 높이와 폭을 가져오고 둘 다 앞의 두 변수에 저장합니다.
(4) 그런 다음 Document 내에서 body 를 탐지하여 창 크기를 가져와서 앞의 두 변수에 저장합니다.
(5) 함수 마지막에 이름으로 양식 요소에 액세스하면 결과가 두 개의 텍스트 상자로 출력됩니다.
(6) JavaScript 코드 마지막에 findDimensions () 함수를 호출하여 전체 작업을 완료합니다.