JavaScript를 작성할 때는 종종 웹 페이지, 브라우저 또는 화면의 높이와 너비를 사용하여 레이아웃 포지셔닝 문제를 해결해야합니다. 당신은 종종 사용 전후에 그것을 잊어 버리거나 온라인으로 검색하고 직접 요약하여 다시 사용하여 시간과 노력을 절약하는 것이 편리합니다.
웹 페이지의 보이는 영역 너비 : 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 = 높이
요약 : 높이와 너비에는 많은 것들이 있습니다. 나는 나 자신의 세부 사항 중 일부를 이해하지 못했습니다. 그것들을 실험 한 후에, 그들 중 일부는 같은 값을 가지므로 매우 혼란스럽고 상황에 의존 할 수 있습니다.