javascript中的 offsetParent

最新推荐文章于 2022-03-04 11:12:04 发布
最新推荐文章于 2022-03-04 11:12:04 发布
阅读量445 收藏
点赞数
分类专栏： javascript


在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" 
ForMyWebFrontSide
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript拖拽系列文章1之offsetParent属性第1/3页
10-30
在JavaScript中，你可以通过`element.offsetParent`来访问这个属性。 `offsetParent`的返回值是一个对象引用，这个对象是距离调用该属性的元素最近的定位父元素。如果元素没有被定位，那么`offsetParent`会返回根...
offsetParent 算法分析
09-05
`offsetParent`属性是JavaScript中用于获取元素相对于其定位父元素的偏移量的一个关键属性。这个属性在处理页面上的动态布局和定位时非常有用，因为它可以帮助开发者确定一个元素在DOM树中的确切位置。然而，由于...
关于JSP中的offsetparent
Sir_LuciFer的专栏
09-24 458
这个系列文章主要是讲述实现Javascript拖拽功能的基础知识，并将在最后给出一个完整的示例。适合对拖拽完全不懂的人阅读。第一篇就先讲讲Javascript中的offsetParent属性吧。  支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+ 
javascript中定位父级offsetParent 及偏移大小
蒲公英芽的博客
02-29 609
偏移量（offset dimension）是javascript中一个重要的概念。javascript中涉及到偏移的有offsetWidth、offsetHeight、offsetLeft、offsetTop这四个值，offsetLeft 和 offsetTop 都是以 offsetParent 的内边距为参照的。 console.dir(元素)，可以看到下面会有offsetParent这个属性。...
在javascript中使用yield
sharleen84的博客
03-04 2840
yield 关键字用来暂停和恢复一个生成器函数（(function* 或遗留的生成器函数）。 /** * 在控制台每隔1秒，依次输出 * 0,1,2,3,4 */ //延迟1秒返回n function delay(n){ return new Promise(resolve => { setTimeout(() => { resolve(n) }, 1000); }) } //方案一： async + awa
js中offsetParent详解
热门推荐
QMM的专栏
06-03 2万+
1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute  relative fixed），如果其父元素中不存在定位则offsetParent为：body元     素 2. 根据定义分别存在以下几种情况 【1】元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefo
【JavaScript源代码】JavaScript offsetParent案例详解.docx
12-28
JavaScript offsetParent案例详解 　1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元 ...
JavaScript中尺寸、坐标
09-23
在JavaScript中，理解和操作元素的尺寸与坐标是实现动态布局、动画效果以及用户交互的关键技能。以下是对这一主题的详细阐述： 1. **DOM元素的尺寸** - `offsetWidth` 和 `offsetHeight`: 这两个属性返回元素的总...
javascript DOM笔记 1
08-08
此外，`parentNode`属性可以用来获取一个节点的父节点，而`offsetParent`返回的是相对于定位父元素的节点。`firstChild`和`lastChild`分别获取第一个和最后一个子节点，但它们可能不区分元素节点和文本节点，因此在...
深入理解js中的yield
qq_43050077的博客
09-24 3233
yield是什么 yield是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。 yield关键字实际返回一个IteratorResult（迭代器）对象，它有两个属性，value和done，分别代表返回值和是否完成。 yield无法单独工作，需要配合generator(生成器)的其他函数，如next，懒汉式操作，展现强大的主动控制特性。 yield应用的简单例子 demo1 如果你看到某个
JS OffsetParent属性深入解析
hongzhensheng246的博客
09-23 358
本文转载:http://www.jb51.net/article/45555.htm 本篇文章要是对JS中的OffsetParent属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所 帮助 offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器
JS OffsetParent属性
weixin_34010566的博客
02-20 64
   offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：...
js原生offsetParent解析
懒虫一个V
07-20 1万+
offsetParent是个只读属性，返回最近显示指定位置的容器元素的引用。如果元素没有指定位置，最近的元素或者根元素（标准模式下是html，怪异模式下是body）就是offsetParent。当元素的style.display='none'时，offsetParent返回null。由于offsetTop和offsetLeft是相对于页边距，因此offsetParent是非常有用的。     
Rust案例分析.docx
最新发布
07-16
Rust 是一种系统编程语言，具有内存安全、并发编程和高性能等特点。下面是一个 Rust 案例分析，展示如何使用 Rust 开发一个简单的命令行程序，该程序将读取文件内容并统计文件中的单词数量。
"Python 编程基础与应用概览"
07-16
Python 是一种广泛使用的高级编程语言，它以其清晰的语法和代码可读性而闻名。Python 支持多种编程范式，包括面向对象、命令式、函数式和过程式编程。它具有丰富的标准库和第三方库，使其在各种领域如网络服务器、科学计算、人工智能、数据分析、机器学习、Web 开发等都具有广泛的应用。 以下是一些关于 Python 的关键点： ### 1. **基本特性** - **易于学习**：Python 有一个简洁的语法，使得新手容易上手。 - **跨平台**：可以在多种操作系统上运行，包括 Windows、Mac OS X、Linux 等。 - **解释型语言**：Python 代码在运行时会被解释器逐行执行，无需编译。 ### 2. **应用领域** - **Web 开发**：使用 Django、Flask 等框架可以快速开发 Web 应用。 - **数据科学**：NumPy、Pandas、SciPy、Matplotlib 等库是数据科学和科学计算的常用工具。 - **机器学习**：Scikit-learn、TensorFlow、PyTorch 等库提供了机器学习和深度学习的工具。 -
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、付费专栏及课程。

余额充值