js offsetParent

最新推荐文章于 2020-11-18 16:32:29 发布
最新推荐文章于 2020-11-18 16:32:29 发布
阅读量84 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/villain0/article/details/83373364
版权
在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"
villain0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js.offsetParent属性
weinideai的专栏
04-02 1822
 参考：offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（
JS OffsetParent属性深入解析
hongzhensheng246的博客
09-23 361
本文转载:http://www.jb51.net/article/45555.htm 本篇文章要是对JS中的OffsetParent属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所 帮助 offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器
JS OffsetParent属性
迟到的程序猿
11-26 1369
  offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译
JS offsetparent 问题
weixin_30633405的博客
06-29 757
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 ...
JS-offsetParent作用
堇年
10-05 157
作用 获取元素的第一个定位祖先元素 如果没有祖先元素是定位的, 那么就是获取到的就是body <style> *{ margin: 0; padding: 0; } .grand-father{ width: 300px; height: 300px; margin-top: 1...
【JavaScript源代码】JavaScript offsetParent案例详解.docx
12-28
### JavaScript offsetParent 案例详解 #### 一、offsetParent 定义 在Web开发中，`offsetParent`是一个非常重要的属性，它用于获取一个元素的偏移父元素。根据定义，`offsetParent`指的是距离当前元素最近的进行...
js parentElement和offsetParent之间的区别
10-29
里主要说的是 offsetParent 属性，这个属性在 MSDN 的文档中也没有解释清楚，这就让人更难理解这个属性。 这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。
offsetParent 算法分析
09-05
`offsetParent`属性是JavaScript中用于获取元素相对于其定位父元素的偏移量的一个关键属性。这个属性在处理页面上的动态布局和定位时非常有用，因为它可以帮助开发者确定一个元素在DOM树中的确切位置。然而，由于...
js中offsetParent详解
hsany330的专栏
10-15 848
1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元 素 2. 根据定义分别存在以下几种情况 【1】元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null） 【2】元素自身无fixed定位，且父元素也不存在定位，offse...
JS OffsetParent属性详解
神经网络爱好者
10-05 1291
JS OffsetParent属性在WEB开发过程中迟早会用到，下面17javascript跟大家距离说明一下这个属性的主要用途。    offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标
Js offsetTop、offsetParent...
码农
12-16 750
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollW
js中offsetParent，offsetLeft的兼容问题
道路是曲折的，前途是光明的
08-11 2882
一、offsetParent 先简单的来个结构,三个嵌套的div，主要是找div3的offsetParent<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;paddin
JS中的offsetParent和parentNode 以及 获取元素相对body的偏移值
VisonYH的博客
01-21 1031
1. JS 中的 offsetParent 和 parentNode 在正常的文档流中，元素的 offsetParent 值为 body 元素，offsetLeft 和offsetTop 获取的也是相对于 body 的偏移量； 而 parentNode 指的是元素的父节点。 2. 获取元素相对于 body 的偏移量 需要考虑到非正常文档流中（有关元素不处于正常文档流的情况，这里不
JavaScript中偏移量属性
H_zhiyi的博客
11-18 977
偏移量：获取在已定位的父级元素的子元素位置属性   offsetLeft  取正值从左向右偏移，取负值从右向左偏移   offsetTop  取值从上向下偏移，取负值从下向上偏移   offsetWidht  获取元素的宽度   offsetHeight  获取元素的高度   offsetParent  获取定位过的父元素，即有可能不是离得最近的父级元素 客户区大小：   clientLeft  离已定位的父级元素的左边距，包括自身左边框宽度   clientTop  离已定位的父级元素的上边距，包括自身上
js原生offsetParent解析
热门推荐
懒虫一个V
07-20 1万+
offsetParent是个只读属性，返回最近显示指定位置的容器元素的引用。如果元素没有指定位置，最近的元素或者根元素（标准模式下是html，怪异模式下是body）就是offsetParent。当元素的style.display='none'时，offsetParent返回null。由于offsetTop和offsetLeft是相对于页边距，因此offsetParent是非常有用的。     
offsetParent
最新发布
05-10
`offsetParent` 是一个只读属性，返回元素的最近的已定位（`position` 不为 `static`）祖先元素。如果没有已定位的祖先元素，则 `offsetParent` 为 `body` 元素。 `offsetParent` 属性常用于计算元素的绝对位置，例如通过 `offsetTop` 和 `offsetLeft` 属性。这些属性返回元素相对于其 `offsetParent` 元素的位置。如果该元素没有 `offsetParent`，则这些属性返回相对于文档的位置。 需要注意的是，`offsetParent` 属性的值在某些情况下可能会被改变，例如将元素的 `position` 属性从 `static` 改变为其他值，或者通过 JavaScript 动态改变元素的 `parentNode` 属性。因此，使用 `offsetParent` 属性计算元素位置时需要注意这些变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值