때로는 프로젝트에서 JS를 사용하여 요소 위치를 얻기 위해 요소 위치를 찾습니다. 먼저 그림을 사용하여 scrollwidth, clientwidth 및 offsetwidth의 관계를 설명하십시오.
다양한 너비와 높이를 얻는 JS에 대한 간단한 소개 :
ScrollHeight : 물체의 스크롤 높이를 가져옵니다.
scrollleft : 객체의 왼쪽 경계와 창에서 현재 보이는 컨텐츠의 왼쪽 끝 사이의 거리를 설정하거나 얻습니다.
SCROLLTOP : 객체의 상단과 창에서 보이는 내용의 상단 사이의 거리를 설정하거나 얻습니다.
scrollwidth : 객체의 스크롤 너비를 가져옵니다
Offestheight : 부모 좌표 오프셋 튼튼한 속성에 의해 지정된 레이아웃 또는 부모 좌표에 대한 객체의 높이를 가져옵니다.
OffsetLeft : 오프셋 튼튼한 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대해 객체의 계산 된 왼쪽 위치를 가져옵니다.
OffsetTop : 오프셋 탑 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대해 객체의 계산 된 상단 위치를 가져옵니다.
event.clientx 문서에 대한 수평 좌표
event.clienty 수직 좌표 문서와 관련하여
event.offsetx 컨테이너에 대한 수평 좌표
이벤트. 오프 세트 수직 좌표 컨테이너와 관련하여
document.documentElement.scrolltop 수직 스크롤 값의 값
event.clientx + document.documentElement.scrolltop 문서의 수평 좌표와 관련하여 + 수직 방향으로 스크롤하는 양
위의 내용은 주로 IE를 나타내며 Firefox의 차이는 다음과 같습니다.
IE6.0, FF1.06+:
clientWidth = 너비 + 패딩
ClientHeight = 높이 + 패딩
offsetwidth = width + padding + 테두리
OffSetheight = 높이 + 패딩 + 테두리
IE5.0/5.5 :
clientWidth = 너비 - 테두리
ClientHeight = 높이 - 테두리
offsetWidth = 너비
Offestheight = 높이
(CSS의 여백 속성은 ClientWidth, OffsetWidth, ClientHeight 및 Offestheight와 관련이 없음을 언급해야합니다.
offsetwidth (너비+패딩+테두리)
OBJ가 HTML 컨트롤이라고 가정합니다.
obj.offsettop은 OBJ에서 상단 또는 상단 컨트롤로의 위치, 정수, 단위 픽셀을 나타냅니다.
obj.offsetleft는 OBJ에서 왼쪽 또는 상단 컨트롤까지의 위치, 정수, 단위 픽셀을 나타냅니다.
obj.offsetwidth는 OBJ 컨트롤 자체의 너비, 정수 및 단위 픽셀을 나타냅니다. 스크롤 막대와 경계를 제외한 객체의 가시 콘텐츠의 너비를 가져옵니다.
obj.offsetheight는 OBJ 컨트롤 자체의 높이, 정수, 단위 픽셀을 나타냅니다.
Offsetwidth와 Style.width의 차이
1. OffsetTop은 숫자를 반환하고 Style.top은 문자열을 반환하며 숫자 외에 PX를 포함하는 문자열을 반환합니다.
2. 오프셋 탑은 읽기 전용이며 Style.top은 읽기입니다.
3. HTML 요소에 상단 스타일이 지정되지 않으면 Style.top은 빈 문자열을 반환합니다.