JS OffsetParent属性深入解析

前端技术 2023/08/08 JavaScript

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 \"none\"时（译注：IE和Opera除外），offsetParent属性 返回 null。

句法：
parentObj = element.offsetParent

变量：
· parentObj 是一个元素的引用，当前元素的偏移量在其中计算。

复制代码 代码如下:

<!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

结论：
当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行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：\"DIV\"
Internet Explorer 7：\"DIV\"
Opera 9.51：\"DIV\"
Chrome 0.2：\"DIV\"
Safari 3：\"DIV\"

结论：
当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素

测试代码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\">测试OffsetParent属性</p>
</div>
</h1>
</body>
</html>

测试结果：
Firefox3：\"H1\"
Internet Explorer 7：\"H1\"
Opera 9.51：\"H1\"
Chrome 0.2：\"H1\"
Safari 3：\"H1\"

结论：
当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

本文地址：https://www.stayed.cn/item/584

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案