js는 컨트롤의 위치와 다양한 browser_javascript 기술의 차이점을 가져옵니다.-JS 튜토리얼-php.cn

js는 컨트롤의 위치와 다양한 browser_javascript 기술의 차이점을 가져옵니다.

WBOY

풀어 주다： 2016-05-16 17:26:20

원래의

1168명이 탐색했습니다.

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

 
//좌표 위치 가져오기
function getpos( e) { 
var t=e.offsetTop; 
var height=e.offsetHeight; 
while(e=e.offsetParent) { 
t = e.offsetTop; 
l =e.offsetLeft; 
} 
} 

 

obj가 HTML 컨트롤이라고 가정합니다.
obj.offsetTop은 상단 또는 상단 컨트롤, 정수, 단위 픽셀에서 obj의 위치를 나타냅니다.
obj.offsetLeft는 왼쪽 또는 위쪽 컨트롤, 정수, 단위 픽셀에서 obj의 위치를 나타냅니다.
obj.offsetWidth는 obj 컨트롤 자체의 너비, 정수, 단위 픽셀을 나타냅니다.
obj.offsetHeight는 obj 컨트롤 자체의 높이, 정수, 단위 픽셀을 나타냅니다.

앞서 언급한 '위 또는 위' 컨트롤과 '왼쪽 또는 위' 컨트롤에 대해 설명하겠습니다.

예:

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

;/div> ;

"제출" 버튼의 offsetTop은 "제출" 버튼과 "도구" 레이어의 위쪽 테두리 사이의 거리를 나타냅니다. "도구" 레이어의 위쪽 테두리입니다.

"재설정" 버튼의 offsetTop은 "재설정" 버튼과 "도구" 레이어의 위쪽 테두리 사이의 거리를 나타냅니다. 위쪽 가장자리에 가장 가까운 것이 "도구" 레이어의 위쪽 테두리이기 때문입니다.

"제출" 버튼의 offsetLeft는 "제출" 버튼과 "도구" 레이어의 왼쪽 테두리 사이의 거리를 나타냅니다. 왜냐하면 왼쪽에 가장 가까운 것이 "도구"의 왼쪽 테두리이기 때문입니다. 층.
"재설정" 버튼의 offsetLeft는 "제출" 버튼의 오른쪽 테두리에서 "재설정" 버튼까지의 거리를 나타냅니다. 왜냐하면 왼쪽에 가장 가까운 것이 "제출" 버튼의 오른쪽 테두리이기 때문입니다.

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

1. 그리고 style.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에서 FireFox의 차이점은 다음과 같습니다.

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

IE6.0, FF1.06:

clientWidth = 너비 패딩 
clientHeight = 높이 패딩 
offsetWidth = 너비 패딩 테두리 
offsetHeight = 높이 패딩 테두리 
IE5.0/5.5: 
clientWidth = 너비 - 테두리 
clientHeight = 높이 - 테두리 
offsetWidth = 너비 
offsetHeight = 높이 

 
( 언급할 필요가 있음: CSS의 여백 속성은 아무 관련이 없습니다. clientWidth, offsetWidth, clientHeight 및 offsetHeight)