js 컨트롤 위치 및 브 라 우 저 별 차이 점 가 져 오기

js 컨트롤 위치 (좌표 위치) 가 브 라 우 저 에 따라 차이 점 을 가 져 옵 니 다.

//      

function getpos(e) {

var t=e.offsetTop;

var l=e.offsetLeft;

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. offset Height 는 obj 컨트롤 자체 의 높이, 정형, 단위 픽 셀 을 가리킨다.
우 리 는 앞에서 언급 한 '상단 또는 상층' 과 '왼쪽 또는 상층' 컨트롤 에 대해 설명 한다.
예 를 들 면:

<div id="tool">

<input type="button" value="  ">

<input type="button" value="  ">

</div>

'제출' 단추 의 offsetTop 은 '제출' 단 추 를 'tool' 층 의 경계선 에서 떨 어 진 거 리 를 말 합 니 다. 위 에서 가장 가 까 운 것 은 'tool' 층 의 상단 경계선 이기 때 문 입 니 다.
'리 셋' 단추 의 offset Top 은 '리 셋' 단추 가 'tool' 층 의 경계선 에서 떨 어 지 는 거 리 를 말 합 니 다. 위 에서 가장 가 까 운 것 은 'tool' 층 의 위쪽 경계선 이기 때 문 입 니 다.
'제출' 단추 의 offsetLeft 는 '제출' 단추 가 'tool' 층 왼쪽 테두리 에서 떨 어 지 는 거 리 를 말 합 니 다. 왼쪽 에서 가장 가 까 운 것 은 'tool' 층 의 왼쪽 테두리 이기 때 문 입 니 다.'리 셋' 단추 의 offsetLeft 는 '리 셋' 단추 가 '제출' 단추 오른쪽 테두리 에서 떨 어 지 는 거 리 를 말 합 니 다. 왼쪽 에서 가장 가 까 운 것 은 '제출' 단추 의 오른쪽 테두리 이기 때 문 입 니 다.
offsetTop 은 HTML 요소 가 위 나 바깥쪽 요소 의 위 치 를 얻 을 수 있 습 니 다. style. top 도 가능 합 니 다. 이들 의 차 이 는 다음 과 같 습 니 다.
1. offsetTop 은 숫자 를 되 돌려 주 고 style. top 은 문자열 을 되 돌려 주 며 숫자 외 에 단위: px 도 있 습 니 다.2. offsetTop 은 읽 기만 하고 style. top 은 읽 고 쓸 수 있 습 니 다.3. HTML 요소 에 top 스타일 을 지정 하지 않 았 다 면 style. top 은 빈 문자열 을 되 돌려 줍 니 다.
offset Left 와 style. left, offset Width 와 style. width, offset Height 와 style. height 도 마찬가지다.
스크롤 높이: 대상 의 스크롤 높이 를 가 져 옵 니 다.scrollLeft: 대상 의 왼쪽 경계 와 창 에 현재 보 이 는 내용 의 가장 왼쪽 끝 사이 의 거 리 를 설정 하거나 가 져 옵 니 다 scrollTop: 대상 의 맨 위 와 창 에 보 이 는 내용 의 맨 위 사이 의 거 리 를 설정 하거나 가 져 옵 니 다 scrollWidth: 대상 의 스크롤 폭 offset Height: 대상 이 지면 이나 부모 좌표 offset Parent 속성 에 의 해 지정 한 부모 좌표 의 높이 offsetL 가 져 옵 니 다.eft: 대상 이 지면 이나 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 = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：-- www.jbxue.com

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(언급 해 야 합 니 다: CSS 의 margin 속성 은 client Width, offset Width, client Height, offset Height 와 무관 합 니 다)