offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过 CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 ”none”时（译注：IE和Opera除外），offsetParent属性 返回 null 。
1.当某个元素及其父元素都未进行CSS定位时，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。（其实无论是标准兼容模式还是怪异模式，根元素都为Body元素）
--------------------------example----返回body-----------------------------
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
<body onload="offset_init()">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</body>
-----------------------------------------------------------------------------
2.当某个元素的父元素进行了CSS定位时（relative定位或者absolute定位），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素。
--------------------------example------返回div---------------------------
<style type="text/css">
#parent{
position:relative;<!-- position:absolute;-->
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>
<body onload="offset_init()">
<div id="parent">div测试代码
<p id="sonObj">
测试OffsetParent属性
</p>
</div>
</body>
------------------------------------------------------------------------------
3.当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。
----------------------------example----------返回h1----------------------
<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>
<body onload="offset_init()">
<h1 id="Grandfather"><div id="parent"><p id="sonObj">测试OffsetParent属性</p></div></h1>
</body>
-----------------------------------------------------------------------------
4.当只有某个元素进行了CSS定位，其父元素及其DOM结构层次上都未进行CSS定位时，则这个元素的offsetParent属性的取值为HTMLBODYElement。更确切地说，这个元素的各种偏移量计算（offsetTop、 offsetLeft等）的参照物为Body元素。
--------------------------example-------返回body-------------------------------
<style type="text/css">
#sonObj{
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">div测试代码
<p id="sonObj">
测试OffsetParent属性
</p>
</div>
</h1>
分享到：
相关推荐
主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根...
在前端开发过程中，我们经常会遇到元素定位的问题，其中 `offsetParent` 是一个非常重要的概念。它主要用于获取最近的一个设置了 `position`（且值为 `relative`、`absolute` 或 `fixed`）的祖先元素。`offsetParent...
### JavaScript offsetParent 案例详解 #### 一、offsetParent 定义 在Web开发中，`offsetParent`是一个非常重要的...此外，考虑到不同浏览器之间的差异，建议在实际项目中通过测试确保`offsetParent`的正确使用。
clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.
在JavaScript中，`parentElement`和`offsetParent`都是用于处理元素上下级关系的属性，但它们的作用和应用场景有所不同。本文将深入解析这两个属性的区别及其使用。 首先，`parentElement`属性是DOM层次结构的一...
需要注意的是，由于TextRange对象的兼容性和可用性问题，在现代Web开发中，它可能已经被更先进的API如Range或Selection所替代，但仍可在一些老旧浏览器或特定场景下使用。 通过上述知识点，我们可以了解到TextRange...
第一篇就先讲讲Javascript中的offsetParent属性吧。 支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+ element.offsetParent Summary offsetParent returns a ...
js getBoundingClientRect 使用方法详解 getBoundingClientRect 是一个常用的 JavaScript 方法，用于获取元素的大小及其相对于视口的位置。该方法返回一个 DOMRect 对象，该对象包含了元素的宽度、高度、left、top...
另外，我们还可以使用parentsUtil()方法，这个方法在Jquery的官方文档中并未明确列出，因此可以看作是一个变体或者自定义方法。它获取当前匹配集合中每个元素的祖先元素，但会停止在匹配给定选择器的第一个元素之前...
为了确保在所有浏览器中都能正确获取元素的绝对位置，开发者通常需要结合`offsetParent`、`offsetLeft`和`offsetTop`属性进行递归计算，或者使用库和框架提供的兼容性处理方法。这样可以避免直接依赖于特定浏览器的...
### JavaScript 页面布局定位方法 在Web开发中，页面布局是一个重要的环节，良好的布局不仅能够提升用户体验，还能增强网站的美观性和功能性。JavaScript作为前端开发的重要工具之一，在页面布局中的作用不可小觑。...
在 JavaScript 中，我们可以使用多种方法来获取元素的坐标，例如使用 getBoundingClientRect() 方法可以获取元素相对于视窗的坐标，而使用 getComputedStyle() 方法可以获取元素的样式信息，包括其坐标信息。...
### 时分秒时间控件及其使用方法：深入解析与应用指南 在现代软件开发中，时间选择器作为用户界面的重要组成部分，广泛应用于各种场景，如日程安排、时间记录等。本文将深入探讨一种自定义的时间控件——时分秒时间...
ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素，如果没有父元素或者是父元素中没有一个是定位过的，返回值就是body元素 ele.offsetLeft和ele.offsetTop取值问题，分多种情况： ...
在网页开发过程中，由于历史遗留原因，Internet Explorer 6（简称IE6）存在许多与现代浏览器不兼容的问题，其中之一就是不支持CSS中的`fixed`定位。`fixed`定位是一种常用的布局方式，可以让元素相对于浏览器窗口...