JS 화면 가 져 오기, 브 라 우 저 창 크기, 웹 페이지 높이 너비 (구현 코드)
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 () 함 수 를 호출 하여 전체 작업 을 완성 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
