화면의 다양한 너비 와 높이 를 가 져 오 는 방법

js 화면의 다양한 너비 와 높이 를 가 져 오 는 방법 (브 라 우 저 호 환)
화면 높이:
window.screen.availHeight window.screen.availWidth
웹 페이지 보 이 는 영역 너비: 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
스크롤 높이: 대상 의 스크롤 높이 를 가 져 옵 니 다.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 대상 이 창 에 대한 일부 속성 을 사 용 했 는데 이런 속성의 주요 기능 과 용법 은 다음 과 같다.
창의 사 이 즈 를 얻 으 려 면 브 라 우 저 마다 다른 속성 과 방법 을 사용 해 야 합 니 다. 창의 실제 사 이 즈 를 검사 하려 면 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. client Width 는 HTML 문서 가 있 는 창의 현재 폭 을 표시 합 니 다.
원본 프로그램 해독
(1) 프로그램 은 먼저 폼 을 만 들 고 두 개의 텍스트 상 자 를 포함 하여 창의 현재 너비 와 높이 를 표시 하 며 그 수 치 는 창 크기 에 따라 달라 집 니 다.
(2) 다음 자 바스 크 립 트 코드 에서 먼저 두 개의 변수 인 winWidth 와 winHeight 를 정의 하여 창의 높이 와 너비 값 을 저장 합 니 다.
(3) 그리고 함수 findDimensions () 에서 window. inner Height 와 window. inner Width 를 사용 하여 창의 높이 와 너 비 를 얻 고 상기 두 변수 에 저장 합 니 다.
(4) 문서 내부 에 깊이 들 어가 body 를 검 측 하여 창 크기 를 가 져 오고 상기 두 변수 에 저장 합 니 다.
(5) 함수 의 마지막 에 이름 에 따라 폼 요 소 를 방문 한 결과 두 텍스트 상자 로 출력 합 니 다.
(6) 자 바스 크 립 트 코드 의 마지막 에 findDimensions () 함 수 를 호출 하여 전체 작업 을 완성 합 니 다.
///////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////
가상 키보드 가 꺼 지면 window 의 resize 이벤트 가 실 행 됩 니 다 (적어도 제 안 드 로 이 드 폰 은 이 렇 습 니 다)
문제 의 input 는 position: fixed 를 사용 합 니까? position: fixed 라면 resize 가 실 행 될 때 자동 으로 위 치 를 조정 할 수 있 습 니 다.
/ / 아래 코드 는 문서 흐름 의 요 소 를 시각 영역 으로 직접 이동 하 는 데 사 용 됩 니 다. Android 5.0 + 유효 합 니 다 (5.0 과 5.1 만 측정 하고 다른 알 수 없 음). IOS 는 측정 하지 않 았 습 니 다.
element.scrollIntoView()
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =focus 이벤트 가 resize 이벤트 전에 발생 하기 때 문 입 니 다.focus 이벤트 에서 초점 을 얻 은 input 요 소 를 변수 에 저장 합 니 다.resize 이벤트 에서 브 라 우 저 시각 영역 top 과 bottom 을 가 져 옵 니 다.브 라 우 저의 시각 영역 위치 가 져 오기:
var view Top = $(window). scrollTop (), / 시각 영역 상단

viewBottom = viewTop + window.innerHeight;  //       

/ / jQuery 사용 안 함
var viewTop = document.body.scrollTop,

viewBottom = viewTop + window.innerHeight;

문서 에 있 는 요소 의 위치 가 져 오기:
var element Top = element 은 저 장 된 input 입 니 다.

elementBottom = elementTop + $element.height();

/ / jQuery 사용 안 함
/ * 원소 의 위치 정보 획득 * /
var getElementPosition = function(elem) {

var defaultRect = {top: 0, left: 0};

var rect = (elem.getBoundingClientRect && elem.getBoundingClientRect()) || defaultRect;

var ret = {

    top: rect.top + document.body.scrollTop,

    left: rect.left + document.body.scrollLeft

}

return ret;

}
var element Top = getElement Position (element). top, / 요소 상단 위치

elementBottom = elementTop + element.clientHeight; //       

매듭 을 짓다
document. body. scrollTop 은 현재 body 가 굴 러 가 는 위 치 를 가 져 옵 니 다.getBoundingClient Rect () 는 요소 가 viewport 의 위치 에 비해 위의 코드 에서 보 입 니 다. 요소 가 시각 적 인 영역 에 있 는 지 판단 하고 element. getBoundingClient Rect () 를 직접 사용 하면 됩 니 다 (~ 8711).
윈도우 위치 조정
$(window).scrollTop(value); // 값 조정
/ / jQuery 사용 안 함
window.scrollTo(0, value); // 값 조정