在td中的元素会把第一个绝对/相对定位的hierarchy parent当作offsetParent,如果没有找到需要分三种情况讨论
一,如果该元素没有绝对/相对定位,则会把td当作offsetParent
二,如果该元素绝对/相对定位并且table没有绝对/相对定位,则会把body当作offsetParent
三,如果该元素绝对/相对定位并且table绝对/相对定位,则会把table当作offsetParent
看一下示例代码
1.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
2.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
3.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "body"
4.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "TD"
5.<BODY >
<TABLE BORDER=1 ALIGN=right style="position:relative">
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "Table"
sondiv.offsetParent.tagName IS "parentdiv"
分享到:
相关推荐
### JavaScript offsetParent 案例详解 #### 一、offsetParent 定义 在Web开发中,`offsetParent`是一个非常重要的属性,它用于获取一个元素的偏移父元素。根据定义,`offsetParent`指的是距离当前元素最近的进行...
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根...
clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.
在JavaScript中,`parentElement`和`offsetParent`都是用于处理元素上下级关系的属性,但它们的作用和应用场景有所不同。本文将深入解析这两个属性的区别及其使用。 首先,`parentElement`属性是DOM层次结构的一...
主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下
第一篇就先讲讲Javascript中的offsetParent属性吧。 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ element.offsetParent Summary offsetParent returns a ...
在JavaScript编程领域,获取DOM元素(Document Object Model,文档对象模型)在页面中的绝对位置是一项常见且实用的技术。本文将详细解析如何通过自定义函数`findPosX`和`findPosY`来实现这一功能,帮助开发者准确...
### JavaScript 获取对象的绝对坐标 #### 知识点概述 在网页开发中,有时我们需要知道一个元素在其父级容器中的绝对位置,即该元素相对于页面左上角的坐标(X轴和Y轴的位置)。这对于实现某些动态效果或者交互功能...
JavaScript,简称JS,是Web开发中的重要脚本语言,用于实现客户端的动态效果和交互。在给定的“js资料大综合(js浮动,js获取坐标)”中,我们可以深入探讨两个关键知识点:js浮动和js获取坐标。 一、JS浮动 在...
JS 获取页面控件坐标 在 HTML 文档中,获取页面控件坐标是非常重要的,特别是在进行交互式开发时。今天,我们将讨论如何使用 JavaScript 获取页面控件坐标。 在 HTML 文档中,每个元素都有其自己的坐标系,通过...
`offsetParent`属性是JavaScript中用于获取元素相对于其定位父元素的偏移量的一个关键属性。这个属性在处理页面上的动态布局和定位时非常有用,因为它可以帮助开发者确定一个元素在DOM树中的确切位置。然而,由于...
while (e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } alert("top=" + t + "\nleft=" + l); } ``` 此函数用于获取页面上任意元素的绝对位置坐标,对于布局调整和动态效果实现非常有用。 ### ...
while (e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } alert("top=" + t + "\nleft=" + l); } ``` **解释**:此函数通过递归遍历元素及其父元素来计算元素相对于页面顶部和左边的位置。这...
### 实用JavaScript脚本代码详解 #### 一、屏蔽鼠标右键及禁止选取与复制功能 **1. 屏蔽鼠标右键** 在网页开发中,为了保护网站内容不被轻易复制或查看源码,开发者可能会采取一些措施来限制用户的行为。其中一项...
本文将详细介绍如何使用JavaScript(简称JS)和HTML结合的方式,在网页中的图片上动态添加水印效果。通过这种方式,可以有效地保护图片版权,增加网站的专业度,并且整个过程无需服务器端处理,完全依赖于客户端操作...
根据提供的文件信息,我们可以归纳总结出一系列与JavaScript相关的实用技巧,这些技巧可以帮助开发者在构建个人网站时更加高效地实现各种功能。接下来将详细介绍这些技巧及其应用场景。 ### 1. 禁用右键菜单和文本...
### 常用的JavaScript技巧解析 在网页开发过程中,JavaScript是一种非常重要的脚本语言,它可以帮助开发者实现页面上的动态效果、用户交互等复杂功能。本文将基于提供的内容,详细介绍几种常用的JavaScript技巧及其...