แอตทริบิวต์ OffsetParent ส่งคืนการอ้างอิงไปยังวัตถุ หากองค์ประกอบของคอนเทนเนอร์นี้ไม่ได้วางตำแหน่ง CSS ค่าของคุณสมบัติออฟเซ็ต parent คือองค์ประกอบรูท (องค์ประกอบ HTML คือองค์ประกอบ HTML ในโหมดความเข้ากันได้มาตรฐานมันเป็นองค์ประกอบของร่างกายในโหมดการนำเสนอแปลก ๆ ) เมื่อ style.display ขององค์ประกอบคอนเทนเนอร์ถูกตั้งค่าเป็น "ไม่มี" (ยกเว้น: IE และ Opera) ทรัพย์สินของ OfficeParent จะส่งคืน NULL
ไวยากรณ์:
parentobj = element.offsetParent
ตัวแปร:
・ ParentObj เป็นการอ้างอิงถึงองค์ประกอบและคำนวณค่าชดเชยขององค์ประกอบปัจจุบัน
คัดลอกรหัสรหัสดังนี้:
<!
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> เอกสารที่ไม่มีชื่อ </title>
<script type = "text/javascript" language = "JavaScript">
ฟังก์ชั่น Offset_init () {
var pelement = document.getElementById ("sonobj");
parentobj = pelement.offsetParent;
การแจ้งเตือน (parentobj.tagname);
-
</script>
</head>
<body only = "Office_init ()" >>
<div id = "parent">
<p id = "sonobj"> ทดสอบแอตทริบิวต์ออฟเซ็ต parent </p>
</div>
</body>
</html>
ผลการทดสอบ:
Firefox3: "Body"
Internet Exploorr 7: "Body"
โอเปร่า 9.51: "ร่างกาย"
Chrome 0.2: "Body"
ซาฟารี 3: "ร่างกาย
สรุปแล้ว:
เมื่อองค์ประกอบและระดับโครงสร้าง DOM ไม่ได้ดำเนินการในระดับโครงสร้าง DOM (Absolute หรือ Relacted) [หรือองค์ประกอบบางอย่างจะอยู่ในตำแหน่งเมื่อองค์ประกอบไม่ได้ดำเนินการในระดับโครงสร้าง DOM เมื่อระดับโครงสร้าง DOM ไม่ได้ดำเนินการ] จากนั้น คุณสมบัติ OffsetParent ขององค์ประกอบนี้ค่าของค่าคือองค์ประกอบรูท แม่นยำยิ่งขึ้นการอ้างอิงของการคำนวณชดเชยต่าง ๆ ขององค์ประกอบนี้ (Offsettop, Offsetleft ฯลฯ ) เป็นองค์ประกอบของร่างกาย (ในความเป็นจริงไม่ว่าโหมดความเข้ากันได้มาตรฐานเวลาหรือโหมดแปลก ๆ องค์ประกอบรูทจะเป็นองค์ประกอบของร่างกาย)
รหัสทดสอบ 2
คัดลอกรหัสรหัสดังนี้:
<!
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> เอกสารที่ไม่มีชื่อ </title>
<style type = "text/css">
#พ่อแม่ {
ตำแหน่ง: Absolute; <!-ตำแหน่ง: ญาติ;->
ซ้าย: 25px;
ด้านบน: 188px;
ชายแดน: 1px Solid Black;
-
</style>
<script type = "text/javascript" language = "JavaScript">
ฟังก์ชั่น Offset_init () {
var pelement = document.getElementById ("sonobj");
parentobj = pelement.offsetParent;
การแจ้งเตือน (parentobj.tagname);
-
</script>
</head>
<body only = "Office_init ()" >>
<div id = "parent"> div code code
<p id = "sonobj"> ทดสอบแอตทริบิวต์ออฟเซ็ต parent </p>
</div>
</body>
</html>
ผลการทดสอบ:
Firefox3: "Div"
Internet Exploorr 7: "Div"
Opera 9.51: "Div"
Chrome 0.2: "Div"
Safari 3: "Div"
สรุปแล้ว:
เมื่อองค์ประกอบหลักขององค์ประกอบบางอย่างดำเนินการวางตำแหน่ง CSS ค่าของคุณสมบัติของสำนักงานขององค์ประกอบนี้คือองค์ประกอบหลัก แม่นยำยิ่งขึ้นการอ้างอิงของการคำนวณชดเชยต่าง ๆ ขององค์ประกอบนี้ (Officettop, Offsetleft ฯลฯ ) เป็นองค์ประกอบหลักของพวกเขา
รหัสทดสอบ 3
คัดลอกรหัสรหัสดังนี้:
<!
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> เอกสารที่ไม่มีชื่อ </title>
<style type = "text/css">
#grandfather {
ตำแหน่ง: ญาติ;
ซ้าย: 25px;
ด้านบน: 188px;
ชายแดน: 1px Solid Black;
-
</style>
<script type = "text/javascript" language = "JavaScript">
ฟังก์ชั่น Offset_init () {
var pelement = document.getElementById ("sonobj");
parentobj = pelement.offsetParent;
การแจ้งเตือน (parentobj.tagname);
-
</script>
</head>
<body only = "Office_init ()" >>
<h1 id = "ปู่">
<div id = "parent">
<p id = "sonobj"> ทดสอบแอตทริบิวต์ออฟเซ็ต parent </p>
</div>
</h1>
</body>
</html>
ผลการทดสอบ:
Firefox3: "H1"
Internet Exploorr 7: "H1"
โอเปร่า 9.51: "H1"
Chrome 0.2: "H1"
Safari 3: "H1"
สรุปแล้ว:
เมื่อองค์ประกอบบางอย่างและองค์ประกอบหลักของมันไม่ใช่การวางตำแหน่ง CSS ค่าของคุณสมบัติสำนักงานขององค์ประกอบนี้จะใกล้เคียงที่สุดในระดับโครงสร้าง DOM และการวางตำแหน่ง CSS ได้ดำเนินการแล้ว