提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

JSOffsetParent属性深入解析

属性 深入 解析
2023-06-13 09:15:15 时间

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

句法：
parentObj=element.offsetParent

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

复制代码代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>UntitledDocument</title>
<scripttype="text/javascript"language="JavaScript">
 functionoffset_init(){
 varpElement=document.getElementById("sonObj");
 parentObj=pElement.offsetParent;
 alert(parentObj.tagName);
   }
</script>
</head>
<bodyonload="offset_init()">
<divid="parent">
<pid="sonObj">测试OffsetParent属性</p>
</div>
</body>
</html>

测试结果：
Firefox3："BODY"
InternetExplorer7："BODY"
Opera9.51："BODY"
Chrome0.2："BODY"
Safari3："BODY

结论：
当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时],则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式，根元素都为Body元素)

测试代码2

复制代码代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>UntitledDocument</title>
<styletype="text/css">
#parent{
   position:absolute;<!--position：relative;-->
   left:25px;
   top:188px;
   border:1pxsolidblack;
}
</style>
<scripttype="text/javascript"language="JavaScript">
   functionoffset_init(){
varpElement=document.getElementById("sonObj");
parentObj=pElement.offsetParent;
alert(parentObj.tagName);
   }
</script>
</head>
<bodyonload="offset_init()">
<divid="parent">div测试代码
<pid="sonObj">测试OffsetParent属性</p>
</div>
</body>
</html>

测试结果：
Firefox3："DIV"
InternetExplorer7："DIV"
Opera9.51："DIV"
Chrome0.2："DIV"
Safari3："DIV"

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

测试代码3

复制代码代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>UntitledDocument</title>
<styletype="text/css">
#Grandfather{
   position:relative;
   left:25px;
   top:188px;
   border:1pxsolidblack;
}
</style>
<scripttype="text/javascript"language="JavaScript">
functionoffset_init(){
varpElement=document.getElementById("sonObj");
parentObj=pElement.offsetParent;
alert(parentObj.tagName);
   }
</script>
</head>
<bodyonload="offset_init()">
<h1id="Grandfather">
<divid="parent">
<pid="sonObj">测试OffsetParent属性</p>
</div>
</h1>
</body>
</html>

测试结果：
Firefox3："H1"
InternetExplorer7："H1"
Opera9.51："H1"
Chrome0.2："H1"
Safari3："H1"

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

相关文章