对HTMLElement.offsetTop/offsetLeft影响的因素有哪些？

最新推荐文章于 2022-05-20 14:42:13 发布
最新推荐文章于 2022-05-20 14:42:13 发布
阅读量1k 收藏
点赞数
分类专栏： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011135260/article/details/97115648
版权

MDN上说HTMLElement.offsetLeft是HTMLElement的一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

也就是说决定offsetLeft的唯一因素是当前节点和offsetParent节点的偏移关系。
也就是说只与offsetParent有关，那么怎么确定一个元素的offsetParent呢？

一个元素的offsetParent可以是以下其中之一：

  1. 具有position属性（除了static值以为）的最近父元素；
  2. 最近的table，table cell父元素；
  3. 根节点元素；
  4. 设置了动画transform:translate的最近父元素；
天涯苍狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Uedit32高亮文件（加强）
weixin_34005042的博客
07-02 3065
替换根目录下　wordfile.txt//////////////////////////////////////////////////////////////////////////////////////////////L1"C/C++" C_LANG Line Comment = // Block Comment On = /* Block Comment Off = */ Escape ...
使百度地图的交通状况支持https协议（TrafficControl.js.）
ljm_lijingming的专栏
02-20 1266
1、源文件TrafficControl.js修改： 2、后台方法： //使百度地图交通状况支持https [HttpGet] public void GetTrafficContol() { HttpWebRequest httpWebRequest = (System.Net.HttpWebRequest)Http...
html中offsetleft属性,HTML DOM offsetLeft用法及代码示例
weixin_33169898的博客
06-08 517
DOM offsetLeft属性用于返回像素的左位置。此位置相对于offsetParent元素的左侧。用法:element.offsetLeft返回值：它返回以像素为单位表示元素左侧位置的数字。例：DOM offsetLeft Property#GFG {height:50px;width:200px;padding:10px;background-color:green;}DOM Style o...
元素位置（offsetLeft[top]）
HaahLeel的专栏
06-23 445
距离最近的定位父级的距离<style> div{padding:50px;} #box1{background: red} #box2{background: green;position: relative} #box3{background: pink} /style> <div id="box1"> <div id="bo
html中offsetleft属性,详解 javascript中offsetleft属性的用法
weixin_31476341的博客
06-08 1077
此属性可以返回当前元素距离某个父辈元素左边缘的距离，当然这个父辈元素也是有讲究的。(1).如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。(2).如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。语法结构:obj.offsetleft特别说明:此属性是只读的，不能够赋值。代码实例:蚂蚁部落*{margin: 0px;padding: 0px;}#main{...
html中offsetleft属性,offsetleft兼容性的理解
weixin_36300275的博客
06-08 712
关于此属性的基本用法可以参阅offsetleft属性用法详解一章节。此属性具有一定的兼容性问题，那就是在IE7浏览器中，它的返回值是想对于最近的父辈元素的左侧的距离。上面的代码在其他浏览器中返回值是100，但是在IE7浏览器中返回值是50。至于IE6没有测试，感兴趣的大家可以做一下测试。下面抽点空给大家介绍offsetLeft与style.left的区别offsetLeft 获取的是相对于父对象的...
JavaScript,offsetLeft
lycsdn的博客
10-14 182
父元素有定位的情况下：offsetLeft = 元素边框外侧到父元素边框内侧的距离 offsetTop同理 兼容性问题参考链接：offsetWidth和offsetLeft
JS中获取 DOM 元素的绝对位置实例详解
12-10
`HTMLElement.offsetTop` 和 `HTMLElement.offsetLeft` 属性分别用于获取元素相对于其定位容器（positioning container）顶部和左侧的距离。如果所有祖先元素都是静态定位（position: static），则这两个属性表示...
如何写一个通用的JavaScript效果库！(1/2)
10-30
* @param {HTMLElement} element - 需要操作的DOM元素 * @param {number} [value] - 设置的透明度值，范围0-1 * @returns {number | void} - 若只传入element则返回透明度值；若传入element和value则不返回值 */...
JavaScript（四）（DOM/Node/NodeList/Document/Element）
qq_43456781的博客
07-22 783
JavaScript（四）（DOM） 文章目录JavaScript（四）（DOM）六、DOM33. DOM 概述33.1 DOM33.2 节点33.3 节点树（Document只有两个子节点doctype/html根节点）34. Node 接口34.1 属性34.1.1 Node.prototype.nodeType34.1.2 Node.prototype.nodeName34.1.3 Node.prototype.nodeValue34.1.4 Node.prototype.textContent34.
html对象的style.left和offsetLeft区别，以及分享一个封装好的缓动动画函数，可用来做轮播图，滑动门特效。
weixin_47469299的博客
10-21 429
区别就是offsetLeft是只读的，而style.left是可以修改的，所以要修改只能修改style.left。 function animate(obj,target,callback){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var step = (target - obj.offsetLeft)/10; step = step >0 ? Math.ceil(step): Math.floor(
position().top和scrollTop()和.offset()
nox
02-24 1557
afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       a
关于offsetTop的误解
04-22 780
一直以为offset是子元素相对于父元素的距离，后来用了才知道是一个坑，只存在于定位元素中 在做li的搜索的定位的时候，为了得到li相对于ul的距离，本来也可以用li的高度相乘，但是用了offsetTop，可是用上后发现得到的值怎么都不对，最后在控制台找到他的offsetParent竟然不是ul，跑到了另外一个元素上面, 原因，offsetTop是找到元素相对于父级定位元素的距离， ...
HTMLElement属性：offsetParent,offsetLeft,offsetTop
m0_37158404的博客
05-20 621
HTMLElement.offsetParent - Web API 接口参考 | MDN HTMLElement.offsetParent是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的table,td,th,body元素。当元素的style.display设置为 "none" 时，offsetParent返回null。offsetParent很有用，因为offsetTop和offsetLeft都是相对于其内边距边界的。 HTMLElem...
Element属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
socaicaicaicai的博客
12-09 1301
Element属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTopElement属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTopclientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度。clientHeightoffsetHeightscrollHeightscrollTopoffsetTop Element属性学习之
元素偏移量 offset
weixin_52212950的博客
03-13 5924
offset 即元素偏移量，可以动态地得到元素的大小，位置等等 offset 常用的属性有以下几种： 要注意获取的都是距离带有定位的父元素的位置，而且返回值都不带单位 element.offsetTop：返回值为距离有定位的父元素的上边距的偏移 element.offsetLeft：返回值为距离有定位的父元素的左边距的偏移 element.offsetWidth：返回值为自身宽度+padding+border，不带单位 element.offsetHeight：返回值为自身高度+padding+
offsetParent、offsetLeft/offsetTop深度剖析
weixin_34293141的博客
12-22 417
element.offsetParent 定义 element.offsetParent为包含element的祖先元素中，层级最近的定位元素。 也就是说，offsetParent必须满足三个条件： 是element的祖先元素 最靠近element 是定位元素，即position属性不为static &lt;div class="position-outer" style="position: ...
HTMLElement.offsetParent（offsetLeft和offsetTop参照offsetParent的内边距边界）
hao_sir
02-17 332
IE7以上（不是火狐）： 　　父级没有定位： 　　　　本身没有定位： 　　　　　　==> offsetParent:body 　　　　本身定位为：absolute/relative: 　　　　　　==> offsetParent:body 　　 　　父级有定位: 　　　　本身没有定位: 　　 　　　　==> offsetParent:定位父级 　　　　本身定位为：abs...
关于offsetTop的理解
热门推荐
jinxi1112的博客
05-30 3万+
1. offsetTop：元素到offsetParent顶部的距离 2. offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。 3. 注意...
companyContract:1 Uncaught ReferenceError: xxx is not defined at HTMLElement.onclick
最新发布
08-30
引用中提到的错误信息"Uncaught ReferenceError: xxx is not defined"表示在页面中的某个地方尝试访问了一个未定义的变量xxx。这种错误通常是由于变量未被正确声明或者引用的顺序不正确所引起的。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值