js offsetParent 获取页面的位置

最新推荐文章于 2021-03-23 14:05:44 发布
最新推荐文章于 2021-03-23 14:05:44 发布
阅读量453 收藏
点赞数
分类专栏： js 文章标签： javascript 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011749558/article/details/12008029
版权

   获取页面的位置 只能用 offsetParent 吗

 在一个大公司面试时 面试官说 必须用这个属性吗我说不确定 为什么parentNode为什么不行呢 

我测试了大半天没有很好的结构

   offsetParent  是指相对的父元素 即是定位元素

   parentNode   是直接父辈元素  不是定位的元素的父辈元素

  而获取相对位置只能是offset 这个 相对属性的 值 也许是offsetTop 也是是offsetLeft 

      

   

lucktanKing
关注
专栏目录
js 获取元素位置和大小_js 位置_Js宽度高度（详解）
天马3798
12-10 3667
如obj.style.top、obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px)，同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。该属性指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度，即滚动条宽高度。
JS-offsetParent定位父节点
a2273490的博客
11-12 236
offsetParent:离当前元素最激动呢一个有定位的父节点 如果没有定位父级，默认是body IE7以下如果当前元素没有定位默认是body，如果有定位就是html IE7以下，如果当前元素的某个父级出发了layout，(zoom: 1;) 那么offsetParent就会被指向到那个触发layout的父节点上 <!DOCTYPE HTML> <htm...
js原生offsetParent解析
懒虫一个V
07-20 1万+
offsetParent是个只读属性，返回最近显示指定位置的容器元素的引用。如果元素没有指定位置，最近的元素或者根元素（标准模式下是html，怪异模式下是body）就是offsetParent。当元素的style.display='none'时，offsetParent返回null。由于offsetTop和offsetLeft是相对于页边距，因此offsetParent是非常有用的。     
jquery找祖先包含_jQuery - 使用.offsetParent()方法获取最为靠近的祖先元素
weixin_32900811的博客
01-15 187
jQuery .offsetParent()获取最为靠近的祖先元素获取最为靠近的祖先元素。方法的返回对象为新的Jquery对象。如果给定一个表示 DOM 元素集合的 jQuery 对象，.offsetParent() 方法允许我们搜索 DOM 树中元素的祖先，并构造一个由最近的定位祖先元素包围的 jQuery 对象。定位元素指的是，元素的 CSS position 属性设置为 relative、a...
JS中的offsetParent和parentNode 以及 获取元素相对body的偏移值
VisonYH的博客
01-21 1038
1. JS 中的 offsetParent 和 parentNode 在正常的文档流中，元素的 offsetParent 值为 body 元素，offsetLeft 和offsetTop 获取的也是相对于 body 的偏移量； 而 parentNode 指的是元素的父节点。 2. 获取元素相对于 body 的偏移量 需要考虑到非正常文档流中（有关元素不处于正常文档流的情况，这里不
被遗忘的知识-js.offsetParent属性
Dead_Knight的专栏
03-10 206
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和...
JavaScript获取对象在页面中位置坐标的方法
10-22
本文将介绍如何使用JavaScript获取页面中元素的位置坐标。这是一个在进行前端开发，尤其是动态网页设计时，经常会用到的操作。 首先，JavaScript通过DOM（文档对象模型）来操作HTML文档中的元素。DOM将页面内容组织...
用Javascript 获取页面元素的位置的代码
10-29
JavaScript 提供了丰富的属性和方法来帮助我们获取页面元素的位置信息。这些信息可以分为两大类：相对位置和绝对位置。相对位置指的是元素相对于浏览器窗口的位置，而绝对位置指的是元素相对于整个文档的位置。下面...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
总之，理解和掌握JavaScript中的DOM元素位置和尺寸获取方法是Web开发中的基本技能，这对于创建交互式、响应式的网页至关重要。通过熟练运用这些属性和方法，开发者可以实现各种创新的效果，提升用户体验。
javascript 精确获取页面元素的位置
12-09
代码如下: //取得元素x坐标 function pageX(elem) { return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft; } //取得元素y坐标 function pageY(elem) { return elem.offsetParent?...
关于网页元素的定位问题及offsetParent的讨论
kofkyo的专栏
08-06 815
元素可以通过以下三种方式之一在 HTML 页上定位：默认流定位。不指定style.position相对定位，其中元素相对于其父级偏移一定的量。指定position:relative绝对定位，其中元素被给定相对于文档左上角的固定坐标位置。position:absoluteobject.offsetParent----是当前对象的父对象，经过试验，自我理解为　从这个object的外层开始找，直
js中offsetParent详解
顺其自然~专栏
03-23 748
1. offsetParent（返回元素的偏移容器）定义 offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute、relative、fixed），如果其父元素中不存在定位则offsetParent为：body元素。 2. 根据定义分别存在以下几种情况 【1】元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null） 【2】元素自身无fixed定位，且父元素也不存在定位，
jQuery获取元素相对父元素的位置
热门推荐
前端小菜鸟
07-03 2万+
获取元素相对于父元素的位置，两个方法获得Top和Left var X = $('#DivID').position().top; var Y = $('#DivID').position().left; 但是，注意！看下W3C对这个方法的定义，它只对可见元素有效 如果需要获取一个隐藏元素呢，display为none的元素，比如在根据点击的首字母定位姓名的效果，我这里没有想到更好的...
offsetWidth或者clientWidth获取不到，值为0的坑
weixin_44679078的博客
05-21 9898
遇到的问题： 今天在练习写一个自定义右键多级菜单的时候，遇到一个问题，就是第三级的子菜单定位不对，这个定位是依据父菜单的offsetWidth来确定的。打印了一下offsetWidth的值，一直都是0；在这里卡了很久。后来去搜索，原来元素不显示的时候offsetWidth的值是获取不到的，为0；但是我的三级子菜单是在二级子菜单显示的情况下才出现的。后来分析才发现，在显示三级子菜单之前会将所有菜单隐藏，然后通过事件冒泡显示三级菜单，再显示二级菜单，因此我就获取不到二级菜单的offsetWidth。 所以我解决
Javascript获取页面元素相对和绝对位置
最新发布
06-02
要获取页面元素的相对位置，可以使用元素的 offsetLeft 和 offsetTop 属性。这些属性返回元素相对于其 offsetParent 元素的左侧和顶部位置，以像素表示。 例如，要获取元素的相对位置，可以使用以下代码： ```javascript var element = document.getElementById('myElement'); var x = element.offsetLeft; var y = element.offsetTop; ``` 要获取元素的绝对位置，可以使用元素的 getBoundingClientRect() 方法。该方法返回一个包含元素左侧、顶部、右侧和底部位置的 DOMRect 对象。 例如，要获取元素的绝对位置，可以使用以下代码： ```javascript var element = document.getElementById('myElement'); var rect = element.getBoundingClientRect(); var x = rect.left; var y = rect.top; ``` 注意，在使用 getBoundingClientRect() 方法时，返回的位置是相对于视口的，而不是相对于文档的。因此，如果你想要获取相对于文档的绝对位置，你需要将返回的位置加上文档的滚动位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值