JS 화면 가 져 오기, 브 라 우 저 창 크기, 웹 페이지 높이 너비 (구현 코드)

5765 단어
웹 페이지 보 이 는 영역 너비: document. body. client Width 웹 페이지 보 이 는 영역 높이: document. body. client Height 웹 페이지 보 이 는 영역 너비: 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: 대상 의 스크롤 폭 offset Height: 대상 이 지면 이나 부모 좌표 offset Parent 속성 에 따라 지정 한 부모 좌표 의 높이 off 를 가 져 옵 니 다.setLeft: 대상 이 지면 이나 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 = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border
IE5.0/5.5: clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height
(언급 해 야 합 니 다: CSS 의 margin 속성 은 client Width, offset Width, client Height, offset Height 와 무관 합 니 다) 웹 페이지 의 보 이 는 영역 너비: document. body. client Width 웹 페이지 의 보 이 는 영역 이 높 습 니 다: document. body. client Height 웹 페이지 의 보 이 는 영역 너비: document. body. offset Width (사 이 드 라인 의 너비 포함) 웹 페이지 의 보 이 는 영역 이 높 습 니 다: document. body. offset Height(사 이 드 라인 의 높이 포함)웹 페이지 본문 전문 너비: 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 대상 이 창 에 대한 속성 을 사 용 했 습 니 다. 이러한 속성의 주요 기능 과 용법 은 다음 과 같 습 니 다.
창의 사 이 즈 를 얻 으 려 면 브 라 우 저 마다 다른 속성 과 방법 을 사용 해 야 합 니 다. 창의 실제 사 이 즈 를 확인 하려 면 Netscape 에서 Window 의 속성 을 사용 해 야 합 니 다. IE 에서 Document 내부 에 깊이 들 어가 body 를 검 측 해 야 합 니 다. DOM 환경 에서 창의 사 이 즈 를 얻 으 려 면 요소 가 아 닌 루트 요소 의 사 이 즈 를 주의해 야 합 니 다.
Window 대상 의 inner Width 속성 은 현재 창의 내부 폭 을 포함 합 니 다. Window 대상 의 inner Height 속성 은 현재 창의 내부 높이 를 포함 합 니 다.
Document 대상 의 body 속성 은 HTML 문서 의 탭 에 대응 합 니 다. Document 대상 의 document Element 속성 은 HTML 문서 의 루트 노드 를 표시 합 니 다.
document. body. clientHeight 는 HTML 문서 가 있 는 창의 현재 높이 를 표시 합 니 다. document. body. clientWidth 는 HTML 문서 가 있 는 창의 현재 폭 을 표시 합 니 다.
구현 코드
 
  
br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">










:

:


<br><!-- <br>var winWidth = 0; <br>var winHeight = 0; <br>function findDimensions() // : <br>{ <br> <strong>// <br></strong>if (window.innerWidth) <br>winWidth = window.innerWidth; <br>else if ((document.body) && (document.body.clientWidth)) <br>winWidth = document.body.clientWidth; <br> <strong>// <br></strong>if (window.innerHeight) <br>winHeight = window.innerHeight; <br>else if ((document.body) && (document.body.clientHeight)) <br>winHeight = document.body.clientHeight; <br>// Document body , <br>if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth) <br>{ <br>winHeight = document.documentElement.clientHeight; <br>winWidth = document.documentElement.clientWidth; <br>} <br>// <br>document.form1.availHeight.value= winHeight; <br>document.form1.availWidth.value= winWidth; <br>} <br>findDimensions(); <br>// , <br>window.onresize=findDimensions; <br>//--> <br>



원본 프로그램 해독
(1) 프로그램 은 먼저 폼 을 만 들 고 두 개의 텍스트 상 자 를 포함 하여 창의 현재 너비 와 높이 를 표시 하 며 그 수 치 는 창 크기 에 따라 달라 집 니 다.
(2) 다음 자 바스 크 립 트 코드 에서 먼저 두 개의 변수 인 winWidth 와 winHeight 를 정의 하여 창의 높이 와 너비 값 을 저장 합 니 다.
(3) 그리고 함수 findDimensions () 에서 window. inner Height 와 window. inner Width 를 사용 하여 창의 높이 와 너 비 를 얻 고 상기 두 변수 에 저장 합 니 다.
(4) 문서 내부 에 깊이 들 어가 body 를 검 측 하여 창 크기 를 가 져 오고 상기 두 변수 에 저장 합 니 다.
(5) 함수 의 마지막 에 이름 에 따라 폼 요 소 를 방문 한 결과 두 텍스트 상자 로 출력 합 니 다.
(6) 자 바스 크 립 트 코드 의 마지막 에 findDimensions () 함 수 를 호출 하여 전체 작업 을 완성 합 니 다.

좋은 웹페이지 즐겨찾기