웹 페이지의 가시 영역 너비: 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, FF1.06+:
clientWidth = 너비 + 패딩
클라이언트 높이 = 높이 + 패딩
offsetWidth = 너비 + 패딩 + 테두리
offsetHeight = 높이 + 패딩 + 테두리
IE5.0/5.5:
clientWidth = 너비 - 테두리
클라이언트 높이 = 높이 - 테두리
오프셋 폭 = 너비
오프셋 높이 = 높이
(언급할 필요가 있습니다: CSS의 margin 속성은 clientWidth, offsetWidth, clientHeight 및 offsetHeight와 아무 관련이 없습니다.)
웹페이지의 가시 영역 너비: 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
------------------------------
기술적인 포인트
본 절의 코드에서는 윈도우와 관련된 Document 객체의 일부 속성을 주로 사용하고 있으며, 이들 속성의 주요 기능 및 사용법은 다음과 같습니다.
창의 크기를 얻으려면 다양한 브라우저에 대해 다양한 속성과 방법을 사용해야 합니다. 창의 실제 크기를 감지하려면 IE에서 창의 속성을 사용해야 합니다. 본문을 감지하는 문서; DOM 환경에서 창의 크기를 얻으려면 요소가 아닌 루트 요소의 크기에 주의해야 합니다.
Window 개체의 innerWidth 속성에는 현재 창의 내부 너비가 포함됩니다. Window 객체의 innerHeight 속성에는 현재 창의 내부 높이가 포함됩니다.
Document 객체의 body 속성은 HTML 문서의 태그에 해당합니다. Document 객체의 documentElement 속성은 HTML 문서의 루트 노드를 나타냅니다.
document.body.clientHeight는 HTML 문서가 있는 창의 현재 높이를 나타냅니다. document.body.clientWidth는 HTML 문서가 있는 창의 현재 너비를 나타냅니다.
코드 구현
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>
<본문>
<h2 align="center">브라우저 창 크기를 조정하세요</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--브라우저 창의 실제 크기 표시-->
브라우저 창의 실제 높이: <input type="text" name="availHeight" size="4"><br>
브라우저 창의 실제 너비: <input type="text" name="availWidth" size="4"><br>
</form>
<스크립트 유형="텍스트/자바스크립트">
<!--
var winWidth = 0;
var winHeight = 0;
function 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=findDimensions;
//-->
</script>
</body>
</html>
소스 프로그램 해석
(1) 프로그램은 먼저 창의 현재 너비와 높이를 표시하는 두 개의 텍스트 상자가 포함된 양식을 생성하며 해당 값은 창 크기가 변경됨에 따라 변경됩니다.
(2) 후속 JavaScript 코드에서는 창의 높이 및 너비 값을 저장하기 위해 winWidth 및 winHeight 두 변수를 먼저 정의합니다.
(3) 그런 다음 findDimensions() 함수에서 window.innerHeight 및 window.innerWidth를 사용하여 창의 높이와 너비를 가져와 앞서 언급한 두 변수에 저장합니다.
(4) 그런 다음 Document 깊숙이 들어가서 본문을 감지하고 창 크기를 얻은 후 위에서 언급한 두 변수에 저장합니다.
(5) 기능이 끝나면 양식 요소에 이름으로 액세스하면 결과가 두 개의 텍스트 상자에 출력됩니다.
(6) JavaScript 코드 끝에서 findDimensions() 함수를 호출하여 전체 작업을 완료합니다.