브라우저 기본정보를 얻기 위한 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 = 너비 - 테두리

클라이언트 높이 = 높이 - 테두리

offsetWidth = 너비

offsetHeight = 높이

(설명할 필요가 있음: CSS의 여백 속성은 clientWidth, offsetWidth, clientHeight 및 offsetHeight와 아무 관련이 없습니다.)

-----------------

기술 포인트

이 섹션의 코드에서는 윈도우와 관련된 Document 객체의 일부 속성을 주로 사용합니다. 해당 속성의 주요 기능과 사용법은 다음과 같습니다.

창 크기를 얻으려면 브라우저마다 다른 속성과 방법을 사용해야 합니다. 창의 실제 크기를 감지하려면 IE에서 창 속성을 사용해야 합니다. DOM 환경에서 본문 감지를 수행하려면 문서 내부 깊숙한 곳에서 창 크기를 얻으려면 요소가 아닌 루트 요소의 크기에 주의해야 합니다.

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

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

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

다양한 브라우저에서 표시되는 창 크기를 얻는 방법에 대한 약간의 연구입니다.

로컬 테스트에서는 IE, FireFox 및 Opera에서 사용할 수 있습니다

document.body.clientWidth

Document.body.clientHeight를 얻을 수 있는데 매우 간단하고 편리합니다.

그리고 회사 프로젝트에서는 Opera가 여전히

를 사용합니다.

document.body.clientWidth

document.body.clientHeight

그러나 IE와 FireFox는

document.documentElement.clientWidth

document.documentElement.clientHeight

W3C 표준이 문제를 일으키는 것으로 밝혀졌습니다http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

페이지에 이 태그 줄을 추가하면

IE: document.body.clientWidth ==> BODY 개체 너비

document.body.clientHeight ==> BODY 개체 높이

document.documentElement.clientWidth ==> 표시 영역 너비

document.documentElement.clientHeight ==> 표시 영역 높이

FireFox: document.body.clientWidth ==> BODY 개체 너비

document.body.clientHeight ==> BODY 개체 높이

document.documentElement.clientWidth ==> 표시 영역 너비

document.documentElement.clientHeight ==> 보이는 영역 높이?

Opera: document.body.clientWidth ==> 표시 영역 너비

document.body.clientHeight ==> 표시 영역 높이

document.documentElement.clientWidth ==> 페이지 개체 너비(즉, BODY 개체 너비 + Margin 너비) document.documentElement.clientHeight ==>gt; 페이지 개체 높이(즉, BODY 개체 높이 + Margin 높이)

그리고 정의된 W3C 표준이 없는 경우

그러면 IE는 document.documentElement.clientWidth ==>

document.documentElement.clientHeight ==> 0

FireFox는 document.documentElement.clientWidth ==> 페이지 개체 너비(즉, BODY 개체 너비에 여백 너비를 더한 값)

document.documentElement.clientHeight ==> 페이지 개체 높이(예: BODY 개체 높이 + 여백 높이)

Opera는 document.documentElement.clientWidth ==> 페이지 개체 너비(즉, BODY 개체 너비에 여백 너비를 더한 값)

document.documentElement.clientHeight ==> 페이지 개체 높이(예: BODY 개체 높이 + 여백 높이)

사실 프론트엔드 디자인과 개발의 관점에서 볼 때 개체와 방법이 적고 최신 표준을 사용하지 않는 것이 훨씬 더 편리할 것입니다. 하지만 트렌드를 따라가지 못한다면 결코 시니어 디자이너가 될 수 없기 때문에 우리는 여전히 이 지식을 이해하고 숙달해야 합니다.