Html 요소와 본문 사이의 오프셋 거리를 가져옵니다. offsetTop, offsetLeft (For:IE5+FF1) [_javascript 기술

질문:
페이지의 Html 요소와 body 요소 사이의 오프셋 거리를 어떻게 구하나요?

offsetTop 및 offsetLeft, IE, Opera 및 Firefox는 이 두 속성에 대해 서로 다르게 해석합니다.
IE5.0, Opera8.0: offsetTop 및 offsetLeft는 모두 상대적 상위 요소입니다
Firefox1.06: offsetTop 및 offsetLeft는 둘 다 body 요소에 상대적입니다.

따라서:
(1) FF 바로 아래에서 offsetTop과 offsetLeft를 사용하면 서로 페이지 오프셋 거리에 있는 Html 요소와 body 요소를 얻을 수 있습니다. 🎜>(2) IE와 Opera에서는 더 번거롭습니다.
먼저 Html 요소와 body 요소 사이의 모든 Html 요소를 가져와 각각의 offsetTop과 offsetLeft를 계산한 다음 합산해야 합니다.
즉, Html 요소에서 시작하여 본문으로 이동합니다. 순회 프로세스 중에 HTML 요소의 CSS가 borderWidth를 설정하면 borderWidth가 offsetTop 및 offsetLeft에 포함되지 않습니다. 따라서 순회 프로세스 중에도 다음을 추가해야 합니다:
obj.currentStyle.borderLeftWidth, obj.currentStyle.borderTopWidth

다음 테스트 코드는 위의 문제를 해결했으며 IE5 및 FF1과 호환되지만 Opera8에서는 유효하지 않습니다

예제 코드:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

코드 예: Html 요소와 본문 사이의 오프셋을 가져옵니다. Distance offsetTop , offsetLeft

body {float:left;width:100%;}
ul,ul li {margin:0;padding:0;list-style:none;padding:0 }
ul li 입력 {border:1px solid #ccc;} #Bd {
background:#FFE8D9; float:left
border:10px solid # f90;/*이 값은 여전히 ​​IE에서 얻을 수 없습니다.*/

width:100%

}
#BS {

padding:20px
float:left; :#58CB64;

}
#BS ul {border:20px solid #DDF1D8;}

#BM {
margin-top:100px
• float:right width: 300px;
배경:#fff;
}




• 색상 블록 높이: 100픽셀;


• 테스트

테스트

테스트

테스트

테스트