OffsetParent attribute returns a reference to an object. This object is closest to the element that calls the element of OfficeTParent (closest to the layer) and is a container element that has been positioned in CSS. If this container element does not position CSS, the value of the OFFSETParent properties is the root element (the HTML element is the HTML element in the standard compatibility mode; it is a body element in the weird presentation mode). When the style.display of the container element is set to "None" (except for: IE and Opera), the OfficeParent property returns NULL.
syntax:
parentobj = Element.OffsetParent
variable:
・ Parentobj is a reference to an element, and the offset of the current element is calculated.
Copy code code as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // en" http://www.w3.org/tr/html4/stribtddddd "">
<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 only = "office_init ()">>
<div ID = "Parent">
<p ID = "sonobj"> Test OffsetParent attributes </p>
</div>
</body>
</html>
Test results:
Firefox3: "Body"
Internet exploorr 7: "Body"
Opera 9.51: "Body"
Chrome 0.2: "Body"
Safari 3: "Body
in conclusion:
When the elements and its DOM structure levels are not performed in the DOM structure level (Absolute or Relacted) [or a certain element is positioned when the element is not performed in the DOM structure level when the DOM structure level is not performed], then the OffsetParent property of this element The value of the value is the root element. More precisely, the references of various offset calculations of this element (Offsettop, OffsetLeft, etc.) are body elements. (In fact, regardless of the time standard compatibility mode or weird mode, the root elements are body elements)
Test code 2
Copy code code as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // en" http://www.w3.org/tr/html4/stribtddddd "">
<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 only = "office_init ()">>
<div ID = "Parent"> DIV test code
<p ID = "sonobj"> Test OffsetParent attributes </p>
</div>
</body>
</html>
Test results:
Firefox3: "DIV"
Internet exploorr 7: "div"
Opera 9.51: "div"
Chrome 0.2: "div"
Safari 3: "DIV"
in conclusion:
When the parent element of a certain element performs CSS positioning, the value of this element's OfficeParent property is its parent element. More precisely, the references of the various offset calculations of this element (Officettop, OffsetLeft, etc.) are their parent elements
Test code 3
Copy code code as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // en" http://www.w3.org/tr/html4/stribtddddd "">
<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 only = "office_init ()">>
<h1 ID = "Grandfather">
<div ID = "Parent">
<p ID = "sonobj"> Test OffsetParent attributes </p>
</div>
</h1>
</body>
</html>
Test results:
Firefox3: "H1"
Internet exploorr 7: "H1"
Opera 9.51: "H1"
Chrome 0.2: "H1"
Safari 3: "H1"
in conclusion:
When a certain element and its parent element are not css positioning, the value of this element's OfficeParent property is closest to it in the DOM structure level, and the CSS positioning has been performed.