웹 페이지의 보이는 영역 너비 : 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 : 객체의 스크롤 너비를 가져옵니다
Offestheight : 부모 좌표 오프셋 튼튼한 속성에 의해 지정된 레이아웃 또는 부모 좌표에 대한 객체의 높이를 가져옵니다.
OffsetLeft : 오프셋 튼튼한 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대해 객체의 계산 된 왼쪽 위치를 가져옵니다.
OffsetTop : 오프셋 탑 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대해 객체의 계산 된 상단 위치를 가져옵니다.
event.clientx 문서에 대한 수평 좌표
event.clienty 수직 좌표 문서와 관련하여
event.offsetx 컨테이너에 대한 수평 좌표
이벤트. 오프 세트 수직 좌표 컨테이너와 관련하여
document.documentElement.scrolltop 수직 스크롤 값의 값
event.clientx + document.documentElement.scrolltop 문서의 수평 좌표와 관련하여 + 수직 방향으로 스크롤하는 양
즉, Firefox 차이는 다음과 같습니다 .
IE6.0, FF1.06+:
clientWidth = 너비 + 패딩
ClientHeight = 높이 + 패딩
offsetwidth = width + padding + 테두리
OffSetheight = 높이 + 패딩 + 테두리
IE5.0/5.5 :
clientWidth = 너비 - 테두리
ClientHeight = 높이 - 테두리
offsetWidth = 너비
Offestheight = 높이
(CSS의 여백 속성은 ClientWidth, OffsetWidth, ClientHeight 및 Offestheight와 관련이 없음을 언급해야합니다.
－－－－－－－－－－－－－－－－－－－
기술 하이라이트
이 섹션의 코드는 주로 창에 대한 문서 개체의 일부 속성을 사용합니다. 이러한 속성의 주요 기능과 사용은 다음과 같습니다.
창 크기를 얻으려면 다른 브라우저에 다른 속성과 방법을 사용해야합니다. 창의 실제 크기를 감지하려면 Netscape의 창 속성을 사용해야합니다. IE에서 신체를 감지하기 위해; 창 크기를 얻으려면 요소가 아닌 루트 요소의 크기에주의를 기울여야합니다.
창 객체의 내면 속성에는 현재 창의 내부 너비가 포함됩니다. 창 객체의 내부 속성에는 현재 창의 내부 높이가 포함됩니다.
문서 개체의 본문 속성은 HTML 문서의 태그에 해당합니다. 문서 개체의 DocumentElement 속성은 HTML 문서의 루트 노드를 나타냅니다.
document.body.clientHeight는 HTML 문서가있는 창의 현재 높이를 나타냅니다. document.body.clientWidth는 HTML 문서가있는 창의 현재 너비를 나타냅니다.
다양한 브라우저에서 가시 창 크기를 얻는 것에 대한 약간의 연구.
내 지역 테스트에서 : IE, Firefox 및 Opera에서 사용할 수 있습니다.
document.body.clientWidth
document.body.clientHeight를 얻을 수 있습니다. 매우 간단하고 편리합니다.
회사 프로젝트에서 : 오페라는 여전히 사용됩니다
document.body.clientWidth
document.body.clientHeight
그러나 즉, Firefox 사용
document.documentElement.clientWidth
Document.DocumentELement.ClientHeight
W3C 표준은 문제를 일으키고 있습니다.
이 줄을 페이지에 추가하면
IE : document.body.clientWidth ==> 바디 객체 너비
document.body.clientHeight ==> 바디 객체 높이
document.documentElement.clientWidth ==> 가시 영역 너비
document.documentElement.clientHeight ==> 가시 영역 높이
firefox : document.body.clientWidth ==> 바디 객체 너비
document.body.clientHeight ==> 바디 객체 높이
document.documentElement.clientWidth ==> 가시 영역 너비
document.documentElement.clientHeight ==> 가시 영역 높이?
Opera : document.body.clientWidth ==> 가시 영역 너비
document.body.clientHeight ==> 가시 영역 높이
document.documentElement.clientWidth ==> 페이지 객체 너비 (즉, 바디 객체 너비 + 여백 너비) document.documentElement.ClientHeight ==> 페이지 객체 높이 (즉, 바디 객체 높이 + 마진 높이)
W3C에 대한 표준이없는 경우
그런 다음 IE는 다음과 같습니다. document.documentElement.clientWidth ==> 0입니다
document.documentElement.clientHeight ==> 0
Firefox IS : document.documentElement.clientWidth ==> 페이지 객체 너비 (즉, 바디 객체 너비 + 여백 너비)
document.documentElement.clientHeight ==> 페이지 객체 높이 (예 : 바디 객체 높이와 마진 높이)
Opera IS : Document.DocumentElement.ClientWidth ==> 페이지 객체 너비 (예 : 바디 객체 너비 + 마진 너비)
document.documentElement.clientHeight ==> 페이지 객체 높이 (예 : 바디 객체 높이와 마진 높이)
정말 번거 로움입니다. 실제로 프론트 엔드 설계 및 개발의 관점에서 볼 때 최신 표준을 사용하지 않는 것보다 객체와 방법이 적습니다. 그러나 트렌드를 따라 잡을 수 없다면, 당신은 결코 선임 디자이너가 될 것이므로, 우리는 여전히이 지식을 이해하고 마스터해야합니다.