js 마우스 및 객체 좌표 제어 속성 상세 분석_javascript 스킬

offsetTop
offsetParent 속성으로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 개체의 위쪽 위치를 가져옵니다.

offsetLeft
offsetParent 속성으로 지정된 레이아웃 또는 상위 좌표를 기준으로 계산된 개체의 왼쪽 위치를 가져옵니다.

offsetHeight
부모 좌표 offsetParent 속성으로 지정된 레이아웃이나 부모 좌표를 기준으로 개체의 높이를 가져옵니다.
IE와 Opera는 offsetHeight = clientHeight 스크롤 막대 테두리를 고려합니다.
NS와 FF는 offsetHeight를 웹페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다.

offsetWidth
부모 좌표 offsetParent 속성으로 지정된 레이아웃 또는 부모 좌표를 기준으로 개체의 너비를 가져옵니다.

offsetParent
객체의 offsetTop 및 offsetLeft 속성을 정의하는 컨테이너 객체에 대한 참조를 가져옵니다.

clientHeight
객체에 적용될 수 있는 여백, 테두리, 스크롤 막대 또는 패딩을 계산하지 않고 객체의 높이를 가져옵니다.
clientHeight에 대해서는 누구도 이의를 제기하지 않습니다. 그들은 모두 콘텐츠가 보이는 영역의 높이, 즉 페이지 브라우저에서 콘텐츠를 볼 수 있는 영역의 높이라고 생각합니다. , 일반적으로 마지막 도구 모음 아래부터 상태 표시줄 위까지 이 영역은 페이지 콘텐츠와 관련이 없습니다.

clientLeft
offsetLeft 속성과 클라이언트 영역의 실제 왼쪽 사이의 거리를 가져옵니다.

clientTop
offsetTop 속성과 클라이언트 영역의 실제 상단 사이의 거리를 가져옵니다.

clientWidth
객체에 적용될 수 있는 여백, 테두리, 스크롤 막대 또는 패딩을 계산하지 않고 객체의 너비를 가져옵니다.

SCROLL 속성

scroll
스크롤 비활성화 여부를 설정하거나 가져옵니다.

scrollHeight
객체의 스크롤 높이를 가져옵니다.

scrollLeft
객체의 왼쪽 가장자리와 창에 현재 표시되는 콘텐츠의 가장 왼쪽 끝 사이의 거리를 설정하거나 가져옵니다.

scrollTop
객체 상단과 창에 표시되는 콘텐츠 상단 사이의 거리를 설정하거나 가져옵니다.

scrollWidth
객체의 스크롤 너비를 가져옵니다. 이벤트 속성
x
은 상위 문서를 기준으로 마우스 포인터 위치의 x 픽셀 좌표를 설정하거나 가져옵니다.

screenX
사용자 화면을 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다

offsetX
이벤트를 트리거한 개체를 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다.

clientX
창의 클라이언트 영역을 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다. 여기서 클라이언트 영역에는 창 자체 컨트롤과 스크롤 막대가 포함되지 않습니다.

여기에서는 네 가지 브라우저에 의한 document.body의 clientHeight, offsetHeight 및 scrollHeight 해석에 대해 이야기합니다. 여기서는 HTML 컨트롤인 경우 다릅니다.

4가지 브라우저는 IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox)입니다.

clientHeight
clientHeight에 대해 누구도 이의를 제기하지 않습니다. 그들은 모두 콘텐츠가 보이는 영역의 높이, 즉 콘텐츠가 있을 수 있는 영역의 높이라고 생각합니다. 일반적으로 마지막 도구 모음 아래와 상태 표시줄 위의 영역은 페이지 내용과 관련이 없습니다.

offsetHeight
IE와 Opera는 offsetHeight = clientHeight 스크롤 막대 테두리라고 믿습니다. NS와 FF는 offsetHeight를 웹페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다.

scrollHeight
IE와 Opera는 scrollHeight를 웹 페이지 콘텐츠의 실제 높이로 간주하며, 이는 clientHeight보다 작을 수 있습니다. NS 및 FF는 scrollHeight를 웹 페이지 콘텐츠의 높이로 간주하지만 최소값은 clientHeight입니다. 간단히 말하면
clientHeight는 브라우저를 통해 콘텐츠가 보이는 영역의 높이입니다.

NS와 FF는 offsetHeight와 scrollHeight가 모두 웹페이지 콘텐츠 높이라고 생각하지만, 웹페이지 콘텐츠 높이가 clientHeight보다 작거나 같은 경우 scrollHeight 값은 clientHeight이고 offsetHeight는 clientHeight보다 작을 수 있습니다.
IE와 Opera는 offsetHeight가 가시 영역 clientHeight 스크롤 막대와 테두리라고 믿습니다. scrollHeight는 웹페이지 콘텐츠의 실제 높이입니다.

마찬가지로
clientWidth, offsetWidth, scrollWidth에 대한 설명은 위와 동일하며 높이를 너비로 바꾸면 됩니다.

그러나
FF는 DOCTYPE별로 clientHeight를 다르게 해석하는데 xhtml 1 trasitional에서는 위와 같이 설명하지 않습니다. 다른 브라우저에는 이 문제가 없습니다.

js가 페이지 높이를 가져옵니다