Javascript 드래그 앤 드롭 시리즈 기사 1 - offsetParent attribute_javascript 기술 제목 없음 문서제목 없음 문서제목 없음 문서제목 없음 문서-JS 튜토리얼-php.cn

Javascript 드래그 앤 드롭 시리즈 기사 1 - offsetParent attribute_javascript 기술 제목 없음 문서제목 없음 문서제목 없음 문서제목 없음 문서

PHP中文网

풀어 주다： 2016-05-16 19:00:52

원래의

1065명이 탐색했습니다.

이 기사 시리즈에서는 주로 Javascript 드래그 앤 드롭 기능 구현에 대한 기본 지식에 대해 설명하고 마지막에 완전한 예를 제공합니다. 드래그 앤 드롭에 대해 전혀 모르는 사람들에게 적합합니다.

먼저 Javascript의 offsetParent 속성에 대해 이야기해 보겠습니다.
지원되는 브라우저: Internet Explorer 4.0, Mozilla 1.0, Netscape 6.0, Opera 7.0, Safari 1.0
element.offsetParent
요약
offsetParent는 격리에서 가장 가까운(가장 가까운) 개체에 대한 참조를 반환합니다. 계층 구조) 요소가 위치 지정되지 않은 경우 요소의 style.display가 "none"으로 설정된 경우 루트 요소(표준 준수 모드의 html, 쿼크 렌더링 모드의 본문)는 null을 반환합니다.
구문
parentObj = element.offsetParent
매개변수
· parentObj는 현재 요소가 오프셋된 요소에 대한 객체 참조입니다.
사양
DOM 레벨 0. 일부가 아닙니다.
Mozilla 개발자 센터 웹사이트에서 발췌
다음과 같이 번역됨:
element.offsetParent
요약
offsetParent 속성은 offsetParent를 호출하는 요소에 가장 가까운 객체에 대한 참조를 반환합니다( 포함 계층 구조에서 가장 가깝고) CSS 위치에 있는 컨테이너 요소입니다. 이 컨테이너 요소가 CSS 위치에 있지 않으면 offsetParent 속성의 값은 루트 요소(표준 호환성 모드의 html 요소, 이상한 렌더링 모드의 body 요소)에 대한 참조입니다. 컨테이너 요소의 style.display가 "none"(IE 및 Opera 제외)으로 설정된 경우 offsetParent 속성은 null 을 반환합니다.
구문
parentObj = element.offsetParent
변수
· parentObj는 현재 요소의 오프셋이 계산되는 요소에 대한 참조입니다.
사양
DOM 레벨 0. 사양의 일부가 아닙니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" language="JavaScript"> 
function offset_init(){ 
var pElement = document.getElementById("sonObj"); 
parentObj = pElement.offsetParent; 
alert(parentObj.tagName); 
} 
</script> 
</head> 
<body onload="offset_init()"> 
<div id="parent"> 
<p id="sonObj">测试OffsetParent属性</p> 
</div> 
</body> 
</html>

로그인 후 복사

테스트 결과:
Firefox3: "BODY"
Internet Explorer 7: "BODY"
Opera 9.51: "BODY"
Chrome 0.2: "BODY"
Safari 3: "BODY"
결론:
요소와 상위 요소 모두 CSS 위치에 있지 않으면 값은 이 요소의 offsetParent 속성은 루트 요소입니다. 보다 정확하게는 이 요소의 다양한 오프셋 계산(offsetTop, offsetLeft 등)에 대한 참조는 Body 요소입니다. (사실 표준 호환 모드나 이상한 모드와 상관없이 루트 요소는 Body 요소입니다.)
테스트 코드 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#parent{ 
position:absolute; 
<!--position：relative;--> 
left:25px; 
top:188px; 
border:1px solid black; 
} 
</style> 
<script type="text/javascript" language="JavaScript"> 
function offset_init(){ 
var pElement = document.getElementById("sonObj"); 
parentObj = pElement.offsetParent; 
alert(parentObj.tagName); 
} 
</script> 
</head> 
<body onload="offset_init()"> 
<div id="parent">div测试代码<p id="sonObj">测试OffsetParent属性</p></div> 
</body> 
</html>

로그인 후 복사

테스트 결과:
Firefox3: "p"
Internet Explorer 7: "p"
Opera 9.51: "p"
Chrome 0.2: "p"
Safari 3: "p"
결론:
부모 요소가 요소에 CSS가 있습니다. 위치가 지정되면(절대 또는 상대) 이 요소의 offsetParent 속성 값이 상위 요소가 됩니다. 더 정확하게 말하면 이 요소의 다양한 오프셋 계산(offsetTop, offsetLeft 등)에 대한 참조는 해당 부모 요소입니다.
테스트 코드 3:

[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.]

테스트 결과 :
Firefox3: "H1"
Internet Explorer 7: "H1"
Opera 9.51: "H1"
Chrome 0.2: "H1"
Safari 3: "H1"
결론 :
누군가 요소나 상위 요소 모두 CSS 위치에 있지 않은 경우(절대 또는 상대) 이 요소의 offsetParent 속성 값은 DOM 구조 계층에서 해당 요소에 가장 가깝고 CSS 위치에 있는 요소입니다.

테스트 코드 4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#Grandfather{ 
position:relative; 
left:25px; 
top:188px; 
border:1px solid black; 
} 
</style> 
<script type="text/javascript" language="JavaScript"> 
function offset_init(){ 
var pElement = document.getElementById("sonObj"); 
parentObj = pElement.offsetParent; 
alert(parentObj.tagName); 
} 
</script> 
</head> 
<body onload="offset_init()"> 
<h1 id="Grandfather"> 
<div id="parent"> 
<p id="sonObj">测试OffsetParent属性</p> 
</div> 
</h1> 
</body> 
</html>

로그인 후 복사

테스트 결과:
Firefox3: "BODY"
Internet Explorer 7: "BODY"
Opera 9.51: " BODY"
Chrome 0.2: "BODY"
Safari 3: "BODY"
결론:
특정 요소만 CSS에 배치되면 해당 상위 요소나 DOM 구조 수준이 모두 배치되지 않습니다. CSS가 위치 지정되면 이 요소의 offsetParent 속성 값은 HTMLBODYElement입니다. 보다 정확하게는 이 요소의 다양한 오프셋 계산(offsetTop, offsetLeft 등)에 대한 참조는 Body 요소입니다.
자, offsetParent 속성은 이게 다입니다.
다음에 어떤 글을 쓸지는 아직 정해지지 않았어요.