JavaScript 웹 페이지 positioning_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: 개체의 스크롤 너비를 가져옵니다.
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와 아무 관련이 없습니다.)

============================================= === ======

어제 프로젝트의 일부 페이지 레이아웃을 변경한 후 일부 j가 작동하지 않는 것을 발견했습니다. document.documentElement.clientWidth와 같은 문을 통해 얻은 페이지 너비는 0입니다. 인터넷 검색을 통해 새 페이지에 W3C 표준에 대한 참조가 부족하여 document.documentElement.clientWidth가 유효하지 않게 된다는 사실을 발견했습니다.

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

IE:
document.body.clientWidth ==> BODY 개체 너비
document.body.clientHeight ==> BODY 개체 높이
document.documentElement == > 표시 영역 너비
document.documentElement.clientHeight ==> 표시 영역 높이

FireFox :
document.body.clientWidth ==>
document.body.clientHeight ==> BODY 객체 높이
document.documentElement.clientWidth ==> 표시 영역 너비
document.documentElement.clientHeight ==>

Opera:
document.body.clientWidth ==> 표시 영역 너비 document.body.clientHeight ==> 표시 영역 높이
document.documentElement. ==> 페이지 개체 너비(즉, BODY 개체 너비 + 여백 너비)
document.documentElement.clientHeight ==>gt; 페이지 개체 높이(즉, BODY 개체 높이 + 여백 높이)
W3C 표준으로 정의되지 않은 경우

IE:
document.documentElement.clientWidth ==> 0document.documentElement.clientHeight ==> 0


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

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