js parentElement와 offsetParent_javascript 팁의 차이점-JS 튜토리얼-php.cn

js parentElement와 offsetParent_javascript 팁의 차이점

WBOY

풀어 주다： 2016-05-16 18:31:31

원래의

1372명이 탐색했습니다.

첫 번째는 parentElement 속성입니다. 이 속성은 DOM 계층 구조에 정의된 상위-하위 관계입니다. 요소 A에 요소 B가 포함되어 있으면 요소 B는 parentElement 속성을 통해 요소 A를 얻을 수 있습니다.
여기서 주로 다루는 것은 offsetParent 속성입니다. 이 속성은 MSDN 문서에 명확하게 설명되어 있지 않으므로 이 속성을 이해하기가 더 어렵습니다. 지난 며칠 동안 나는 인터넷에서 몇 가지 정보를 찾고 있었고, 내 자신의 테스트도 결합하여 이 속성에 대해 조금 이해하게 되었습니다.
offsetParent 속성을 이해하려면 먼저 "positioned element"라는 이름을 이해해야 합니다. 소위 "positioned element"는 요소에 position 속성을 설정하는 스타일을 의미하며 position style 속성의 값은 다음과 같습니다. 절대, 상대, 고정 요소 중 하나와 같습니다.
상위 객체를 얻기 위해 offsetParent 속성을 사용할 때 두 가지 상황이 있습니다.
1. 요소 자체의 위치가 지정되었습니다.
요소 자체의 위치가 지정되면 offsetParent 특성은 요소가 위치를 지정했음을 반환합니다. 상위 요소, 그렇지 않은 경우 상위 요소가 배치된 경우 BODY 객체가 반환됩니다. 예:

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

< /div>

, 요소의 위치가 지정되지 않았습니다.
요소의 위치가 지정되지 않은 경우, offsetParent는 위치가 지정된 상위 요소를 찾을 뿐만 아니라 TD 및 TABLE 유형의 상위 요소도 찾습니다. 이 세 가지 상위 요소 중 하나라도 발견되면 이 요소가 반환되고, 그렇지 않으면 BODY 객체가 반환됩니다. 예:

코드 복사

코드는 다음과 같습니다.

< div id="pObj2" style="position:relative">

🎜>

obj1.offsetParent는 td1 객체를 반환합니다.
obj2.offsetParent는 pObj2 객체를 반환합니다.
DOM 요소의 속성 중 실제로 이 속성은 parentElement 속성과 동일한 의미를 갖습니다. W3C 표준은 children 및 childNodes 속성을 사용합니다. childNode는 다른 브라우저에서 지원됩니다.