JavaScript CSS 수정 학습 1장 위치 찾기_기본 지식

offset
요소의 offsetTop 및 offsetLeft 속성은 모든 브라우저에서 매우 유용합니다. 상위 요소를 기준으로 요소의 좌표 위치를 제공합니다.

이 코드는 offsetParent를 찾은 다음 offsetTop 및 offsetLeft를 추가합니다. 결국 offsetParent가 어디에 있든 상관없이 화면에서 요소의 실제 좌표를 제공합니다.

설명
이 코드는 매우 간단합니다. 먼저 계산할 요소를 전달한 다음 curleft 및 curtop 변수를 0으로 설정합니다.

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

function findPos(obj) {
var curleft = curtop = 0;

브라우저가 offsetParent를 지원하는 경우:

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

if (obj.offsetParent) {

새 개체를 찾을 때마다 해당 offsetTop 및 offsetLeft를 curtop 및 curleft에 추가합니다.

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

do {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;

팁: '=' 값을 반환하세요.
요령은 다음과 같습니다.

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

} while (obj = obj.offsetParent)

표현식 오류가 아닙니다. 나는 obj를 obj.offsetParent와 비교하기 위해 '=='를 사용하고 싶지 않습니다(요소가 확실히 상위 요소와 동일하지 않기 때문에 작동하지 않습니다).

그래서 '='를 사용하여 obj.offsetParent의 값을 obj에 전달합니다. 이 기술에 대한 자세한 설명은 여기에 있습니다.

간단히 반환
요소에 offsetParent가 없으면 이 루프가 종료됩니다. offsetParent가 존재하는 경우 offsetLeft는 여전히 curleft에 추가되고 offsetTop은 curtop에 추가됩니다.

루프할 때 이 함수를 호출한 프로그램에 좌표를 반환합니다.

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

return [curleft,curtop];}

번역 주소: http://www.quirksmode.org/js/findpos.html

재인쇄를 위해 다음 정보를 보관해 주세요
저자: Beiyu (tw :@rehawk)