JS：offsetParent屬性

最新推荐文章于 2020-04-30 09:52:31 发布

最新推荐文章于 2020-04-30 09:52:31 发布 · 56 阅读

文章标签：

#javascript #ViewUI

本文详细解析了offsetParent属性在不同CSS定位情况下的取值，包括未定位、相对定位、绝对定位及层级定位时的取值规律，通过具体代码示例展示了属性行为变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：

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

句法：

parentObj=element.offsetParent

变量：

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

测试代码1：

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

测试代码3：

测试代码4：

测试代码2：

结论：

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

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

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"

测试结果：

Firefox3："BODY"

InternetExplorer7："BODY"

Opera9.51："BODY"

Chrome0.2："BODY"

Safari3："BODY"

结论：

当只有某个元素进行了CSS定位，其父元素及其DOM结构层次上都未进行CSS定位时，则这个元素的offsetParent属性的取值为HTMLBODYElement。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。

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

#sonObj{

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定位的元素。

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

结论：

当某个元素及其父元素都未进行CSS定位时，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。（其实无论时标准兼容模式还是怪异模式，根元素都为Body元素）