브라우저와 화면 너비, 높이 정보_javascript 기술을 얻기 위한 JS 구현 아이디어 및 코드

웹 페이지의 표시 영역 너비: 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 = 너비 패딩

clientHeight = 높이 패딩

offsetWidth = 너비 패딩 테두리

offsetHeight = 높이 패딩 테두리

IE5.0/5.5:
clientWidth = 너비 - 테두리

clientHeight = 높이 - 테두리

offsetWidth = width

offsetHeight = height

(꼭 언급해야 합니다: CSS의 margin 속성은 clientWidth, offsetWidth, clientHeight 및 offsetHeight와 동일합니다) 관련 없음)

------

기술적 포인트
이 섹션의 코드는 주로 사용됩니다. Document 객체에는 창에 대한 몇 가지 속성이 있으며, 해당 속성의 주요 기능과 사용법은 다음과 같습니다.

창의 크기를 얻으려면 브라우저마다 다른 속성과 방법을 사용해야 합니다. 창의 실제 크기를 감지하려면 Netscape에서 Window 속성을 사용해야 합니다. IE 아래의 문서에 깊이 들어가십시오. DOM 환경에서 본문을 감지하십시오. 창의 크기를 얻으려면 요소가 아닌 루트 요소의 크기에 주의해야 합니다.

Window 개체의 innerWidth 속성에는 현재 창의 내부 너비가 포함됩니다. Window 객체의 innerHeight 속성에는 현재 창의 내부 높이가 포함됩니다.

Document 객체의 body 속성은 HTML 문서의 태그에 해당합니다. Document 객체의 documentElement 속성은 HTML 문서의 루트 노드를 나타냅니다.

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

구현 코드 >

코드 복사 코드는 다음과 같습니다.

BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">