JS OffsetParent attribute_javascript 기술에 대한 심층 분석

offsetParent 속성은 offsetParent를 호출하는 요소(포함 계층에서 가장 가까운)에 가장 가깝고 CSS 위치가 지정된 컨테이너 요소인 개체에 대한 참조를 반환합니다. 이 컨테이너 요소가 CSS 위치에 있지 않으면 offsetParent 속성의 값은 루트 요소(표준 호환성 모드의 html 요소, 이상한 렌더링 모드의 body 요소)에 대한 참조입니다. 컨테이너 요소의 style.display가 "none"(IE 및 Opera 제외)으로 설정된 경우 offsetParent 속성은 null을 반환합니다.

구문:
parentObj = element.offsetParent

변수:
· parentObj는 현재 요소의 오프셋이 계산되는 요소에 대한 참조입니다.

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

< ;meta http -equiv="Content-Type" content="text/html; charset=UTF-8" />

OffsetParent 속성 테스트

테스트 결과:
Firefox3: "BODY"
Internet Explorer 7: "BODY"
Opera 9.51: "BODY"
Chrome 0.2: "BODY"
사파리 3: "BODY

결론:
DOM 구조 계층의 요소나 요소 모두 CSS 위치 지정(절대 또는 상대)인 경우 [또는 요소가 CSS 위치인 경우 때때로 요소가 DOM 구조 계층 구조에서 CSS에 의해 위치가 지정되지 않은 경우 이 요소의 offsetParent 속성 값은 루트 요소입니다. 보다 정확하게는 이 요소의 다양한 오프셋 계산(offsetTop, offsetLeft 등)에 대한 참조는 Body 요소입니다. (사실 표준 호환 모드나 이상한 모드와 관계없이 루트 요소는 Body 요소입니다)

테스트 코드 2

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

测试OffsetParent属性

测试结果：
Firefox3："H1"
Internet Explorer 7："H1"
Opera 9.51："H1"
Chrome 0.2："H1"
사파리 3："H1"

结论：
当某个元素及其父元素도未进行CSS정位时(절대적 또는 친척적),则这个元素的offsetParent属性的取值为에서 DOM结构层次中距离其最近，并且已进行了CSS정거된 元素。