자바스크립트 페이지 좌표 관련 지식 정리_기본지식

offsetTop은 상단 또는 외부 요소에서 HTML 요소의 위치를 ​​가져올 수 있습니다. 둘 사이의 차이점은 다음과 같습니다.

offsetTop은 숫자를 반환합니다. style.top은 숫자를 반환하고 top은 숫자 외에 문자열을 반환하며 단위도 px입니다.
2. offsetTop은 읽기 전용이고 style.top은 읽기/쓰기가 가능합니다.
3. HTML 요소에 상단 스타일이 지정되지 않은 경우 style.top은 빈 문자열을 반환합니다.


offsetLeft 및 style.left, offsetWidth 및 style.width, offsetHeight 및 style.height의 경우에도 마찬가지입니다.

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를 의미합니다.
IE6.0, FF1.06:
clientWidth = width padding
clientHeight = height padding
offsetWidth = width padding border
offsetHeight = 높이 패딩 테두리
IE5.0/5.5:
clientWidth = 너비 - 테두리
clientHeight = 높이 - 테두리
offsetWidth = 너비
offsetHeight = 높이
(다음과 같아야 함) 언급하세요: CSS의 margin 속성은 clientWidth, offsetWidth, clientHeight, offsetHeight와 아무 관련이 없습니다.



IE--------- ------- ------
웹 페이지의 가시 영역 너비 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
화면 해상도 높은 창 .screen.height
화면 해상도 너비 window.screen.width
화면 사용 가능한 작업 영역 높이 window.screen.availHeight
화면 사용 가능한 작업 영역 너비 window.screen.availWidth

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

//객체 좌표
var oRect = document. "divHotImg").getBoundingClientRect();
x=oRect.left
y=oRect.top
//alert("(" x "," y ")")

if(ns4||ns6){
x = e.pageX;
y = e.pageY
}