In depth parsing of the JS OffsetParent attribute

2020-03-30 01:19:44
OfStack

The offsetParent attribute returns a reference to an object that is the closest (in the include hierarchy) to the element that called offsetParent and is the container element that has been CSS positioned. If the container element is not CSS positioned, the offsetParent attribute takes the value of the root element (HTML element in standard compatibility mode; In weird render mode for the body element). When the style.display of the container element is set to "none", the offsetParent property returns null.

Syntax:
ParentObj = element. The offsetParent

Variables:
, parentObj is a reference to an element where the offset of the current element is calculated.


<!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"> test OffsetParent attribute </p>
</div>
</body>
</html>

Test results:
Firefox 3: "the BODY"
Internet Explorer 7: "BODY"
Opera 9.51: "the BODY"
Chrome 0.2: "the BODY"
Safari 3: "the BODY

Conclusion:
When an element and its DOM structure hierarchy are not CSS positioned (absolute or relative)[or when an element is CSS positioned and no CSS is positioned in the DOM structure hierarchy], the value of offsetParent attribute of this element is the root element. More specifically, the reference for the various offsets of this element (offsetTop, offsetLeft, etc.) is the Body element. (in fact, the root element is the Body element in both standard compatibility mode and weird mode.)

Test code 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 The test code 
<p id="sonObj"> test OffsetParent attribute </p>
</div>
</body>
</html>

Test results:
Firefox 3: "DIV"
Internet Explorer 7: "DIV"
Opera 9.51: "DIV"
Chrome 0.2: "DIV"
Safari 3: "DIV"

Conclusion:
When the parent of an element is CSS positioned (absolute or relative), the value of the offsetParent attribute of that element is its parent. More specifically, the parent element is the reference for various offsets of this element (offsetTop, offsetLeft, etc.)

Test code 3


<!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"> test OffsetParent attribute </p>
</div>
</h1>
</body>
</html>

Test results:
Firefox 3: "H1"
Internet Explorer 7: "H1"
Opera 9.51: "H1"
Chrome 0.2: "H1"
Safari 3: "H1"

Conclusion:
When an element and its parent are not CSS positioned (absolute or relative), the value of the offsetParent attribute of this element is the element closest to it in the DOM structure hierarchy and has been CSS positioned.