오프셋 속성 속성은 객체에 대한 참조를 반환합니다. 이 컨테이너 요소가 CSS를 위치시키지 않으면 오프셋 비교 속성의 값은 루트 요소입니다 (HTML 요소는 표준 호환 모드의 HTML 요소이며 이상한 프리젠 테이션 모드의 신체 요소입니다). 컨테이너 요소의 스타일이 "없음"으로 설정되면 (IE 및 Opera 제외) 사무실 부동산은 NULL을 반환합니다.
통사론:
parentobj = element.offsetparent
변하기 쉬운:
parentobj는 요소에 대한 참조이며 현재 요소의 오프셋이 계산됩니다.
다음과 같이 코드 코드를 복사하십시오.
<!
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" /> />
<title> 제목없는 문서 </title>
<script type = "text/javaScript"언어 = "javaScript">
함수 오프셋 _init () {
var pelement = document.getElementById ( "sonobj");
parentobj = pelement.offsetparent;
경고 (parentobj.tagname);
}
</스크립트>
</head>
<body only = "Office_init ()">>
<div id = "부모">
<p id = "sonobj"> 테스트 오프 세트 비교 속성 </p>
</div>
</body>
</html>
테스트 결과 :
Firefox3 : "Body"
Internet Exploorr 7 : "Body"
오페라 9.51 : "바디"
Chrome 0.2 : "Body"
사파리 3 : "몸
결론적으로 :
요소 및 DOM 구조 수준이 DOM 구조 수준 (절대 또는 가깝게)에서 수행되지 않으면 (또는 DOM 구조 수준이 수행되지 않을 때 DOM 구조 수준에서 요소가 수행되지 않을 때 특정 요소가 위치됩니다. 이 요소의 상쇄 속성 값의 값은 루트 요소입니다. 보다 정확하게는,이 요소의 다양한 오프셋 계산에 대한 참조 (OffsetTop, OffsetLeft 등)는 신체 요소입니다. (실제로 시간 표준 호환성 모드 또는 이상한 모드에 관계없이 루트 요소는 신체 요소입니다)
테스트 코드 2
다음과 같이 코드 코드를 복사하십시오.
<!
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" /> />
<title> 제목없는 문서 </title>
<스타일 유형 = "텍스트/CSS">
#parent {
위치 : 절대; 절대;-위치 : 상대;->
왼쪽 : 25px;
상단 : 188px;
국경 : 1px 솔리드 블랙;
}
</스타일>
<script type = "text/javaScript"언어 = "javaScript">
함수 오프셋 _init () {
var pelement = document.getElementById ( "sonobj");
parentobj = pelement.offsetparent;
경고 (parentobj.tagname);
}
</스크립트>
</head>
<body only = "Office_init ()">>
<div id = "부모"> div 테스트 코드
<p id = "sonobj"> 테스트 오프 세트 비교 속성 </p>
</div>
</body>
</html>
테스트 결과 :
Firefox3 : "div"
인터넷 exploorr 7 : "div"
오페라 9.51 : "div"
크롬 0.2 : "div"
사파리 3 : "div"
결론적으로 :
특정 요소의 상위 요소가 CSS 포지셔닝을 수행 할 때이 요소의 사무실 부동산 값은 부모 요소입니다. 보다 정확하게는이 요소의 다양한 오프셋 계산 (Officettop, OffsetLeft 등)의 참조는 부모 요소입니다.
테스트 코드 3
다음과 같이 코드 코드를 복사하십시오.
<!
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" /> />
<title> 제목없는 문서 </title>
<스타일 유형 = "텍스트/CSS">
#할아버지 {
위치 : 상대;
왼쪽 : 25px;
상단 : 188px;
국경 : 1px 솔리드 블랙;
}
</스타일>
<script type = "text/javaScript"언어 = "javaScript">
함수 오프셋 _init () {
var pelement = document.getElementById ( "sonobj");
parentobj = pelement.offsetparent;
경고 (parentobj.tagname);
}
</스크립트>
</head>
<body only = "Office_init ()">>
<h1 id = "할아버지">
<div id = "부모">
<p id = "sonobj"> 테스트 오프 세트 비교 속성 </p>
</div>
</h1>
</body>
</html>
테스트 결과 :
Firefox3 : "H1"
Internet Exploorr 7 : "H1"
오페라 9.51 : "H1"
크롬 0.2 : "H1"
사파리 3 : "H1"
결론적으로 :
특정 요소와 상위 요소가 CSS 위치가 아닌 경우이 요소의 사무실 부동산 값은 DOM 구조 수준에서 가장 가깝고 CSS 포지셔닝이 수행되었습니다.