>  기사  >  웹 프론트엔드  >  Node.js는 브라우저와 화면의 다양한 너비와 높이를 가져옵니다.

Node.js는 브라우저와 화면의 다양한 너비와 높이를 가져옵니다.

高洛峰
高洛峰원래의
2017-02-23 17:15:072177검색

1: 도구 모음 및 스크롤 막대를 제외한 웹 페이지의 표시 영역의 너비 및 높이(브라우저 창의 표시 영역 크기)

1. IE9+, chrome, firefox, Opera, Safari의 경우:

window.innerHeight 브라우저 창의 내부 높이입니다. window.innerWidth 브라우저 창의 내부 너비입니다.

2. IE8.7.6.5의 경우:document.documentElement.clientHeight: HTML 문서가 있는 창의 현재 높이를 나타냅니다.

document.documentElement.clientWidth: HTML 문서가 있는 창의 현재 너비를 나타냅니다.

문서 개체의 body 속성은 HTML 문서의 6c04bd5ca3fcae76e30b72ad730ca86d 태그에 해당하며 다음과 같이 표현할 수도 있습니다.

document.body.clientHeight: HTML 문서가 있는 창의 현재 높이를 나타냅니다.

document.body.clientWidth: HTML 문서가 있는 창의 현재 너비를 나타냅니다.

결론: document.body.clientWidth/Height: 너비와 높이가 너무 작고 높이는 기본적으로 200입니다.

document.documentElement.clientWidth/Height 및 창 .innerWidth의 너비와 높이. /높이는 항상 동일합니다.

그래서 다양한 브라우저에서 실용적인 Javascripit 솔루션은 다음과 같습니다.

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

2: 웹 페이지의 전체 텍스트 너비와 높이

scrollWidth 및 scrollHeight는 웹 페이지 콘텐츠의 높이와 너비를 가져옵니다.

1 IE.Opera의 경우: scrollHeight는 clientHeight보다 작을 수 있는 웹 페이지 콘텐츠의 실제 높이;

2. NS.firefox의 경우: scrollHeight는 웹 페이지 콘텐츠의 높이입니다. 그러나 최소값은 clientHeight입니다. 즉, 웹페이지 콘텐츠의 실제 높이가 clientHeight보다 작을 경우, scrollHeight는 clientHeight를 반환합니다.

3. 브라우저 호환성 코드:

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

2: 스크롤 막대 및 기타 가장자리를 포함하여 웹 페이지의 표시 영역의 너비 및 높이( 창의 표시 크기에 따라 변경)

1. 값: offsetWidth = scrollWidth + 왼쪽 및 오른쪽 스크롤 막대 + 왼쪽 및 오른쪽 테두리 OffsetHeight = 스크롤 높이 + 위아래 스크롤 막대 + 위쪽 및 아래쪽 테두리

2. 브라우저 호환성 코드:

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

3: 스크롤된 웹페이지의 거리 및 오프셋

1 .scrollLeft:주어진 객체의 왼쪽 가장자리와 창에 현재 표시되는 콘텐츠의 가장 왼쪽 끝 사이의 거리를 설정하거나 가져옵니다.

2.scrollTop:Set; 또는 주어진 개체의 맨 위 지점과 창에 현재 표시되는 콘텐츠의 가장 왼쪽 끝 사이의 거리를 가져옵니다.

3.offsetLeft:설정 또는 가져오기; offsetParent 속성으로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 특정 객체의 왼쪽 위치

4.offsetTop:주어진 위치를 설정하거나 가져옵니다. offsetParent 속성으로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 지정된 개체의 상단 위치입니다.


브라우저의 다양한 너비와 높이를 얻는 방법에 대한 추가 js 관련 기사는 다음과 같습니다. 화면, PHP 중국어 웹사이트를 주목해주세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.