HTMLElement属性：offsetParent,offsetLeft,offsetTop

已于 2022-05-20 20:25:31 修改
阅读量613 收藏 1
点赞数
分类专栏： Element介绍 文章标签： javascript
于 2022-05-20 14:42:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37158404/article/details/124882595
版权

HTMLElement.offsetParent - Web API 接口参考 | MDN

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

HTMLElement.offsetTop - Web API 接口参考 | MDN

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离

HTMLElement.offsetLeft - Web API 接口参考 | MDN

 HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于  HTMLElement.offsetParent 节点的左边界偏移的像素值。 （行内元素特殊，见文档）

JS在线编辑器,JS在线运行,在线演示,调试测试代码

<style>
    * {
        margin: 0
    }
    /* 有position: relative; 和没有时候的区别，子元素对应的offsetParent不一样了 */
    #father {
        /* position: relative;  */
        width: 150px;
        height: 150px;
        background: red;
    }
    #son {
        margin-top: 10px;
        margin-left: 10px;
        width: 50px;
        height: 50px;
        background: blue; 
        line-height: 50px;
        text-align: center;
    }
</style>
<body>
    <div id="father">
        <div id="son">son</div>
    </div>
</body>
<script>
  var son = document.getElementById("son");
  console.log(son.offsetParent)
  console.log(son.offsetLeft)
  console.log(son.offsetTop)
</script>

垂直方向上的margin相关问题：理解 margin 垂直重叠的原因和解决方案_real_metrix的博客-CSDN博客_垂直margin重叠是为什么

m0_37158404
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
htmlelement.polyfills:轻巧的原始JavaScript polyfill用于HTMLElement接口上的大多数常用操作
05-24
htmlelement.polyfills 用于HTMLElement接口的轻量级香草JavaScript polyfills htmlelement.polyfills库为上一些最常用的DOM交互提供了轻量级的香草JavaScript polyfills。 用法： 安装htmlelement.polyfills包 ...
元素偏移量 offset
weixin_52212950的博客
03-13 5847
offset 即元素偏移量，可以动态地得到元素的大小，位置等等 offset 常用的属性有以下几种： 要注意获取的都是距离带有定位的父元素的位置，而且返回值都不带单位 element.offsetTop：返回值为距离有定位的父元素的上边距的偏移 element.offsetLeft：返回值为距离有定位的父元素的左边距的偏移 element.offsetWidth：返回值为自身宽度+padding+border，不带单位 element.offsetHeight：返回值为自身高度+padding+
HTMLElement.offsetParent（offsetLeft和offsetTop参照offsetParent的内边距边界）
hao_sir
02-17 311
IE7以上（不是火狐）： 　　父级没有定位： 　　　　本身没有定位： 　　　　　　==> offsetParent:body 　　　　本身定位为：absolute/relative: 　　　　　　==> offsetParent:body 　　 　　父级有定位: 　　　　本身没有定位: 　　 　　　　==> offsetParent:定位父级 　　　　本身定位为：abs...
js中offset系列、client系列、scroll系列和screen系列详解
RayShyy的博客
03-15 887
1. offset系列 element.offsetTop: 返回元素距离带有定位的父元素的顶部的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetLeft: 返回元素距离带有定位的父元素的左侧的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetWidth: 返回元素大小，元素内容宽度 + padding值 + border值； element.offsetHeight: 返回元素大小，元素内容高度 + padding值 + bord
（DOM） HTMLElement 中的 offset- 属性
weixin_34008784的博客
10-15 1697
一、offsetParent parentObj = element.offsetParent; HTMLElement.offsetParent是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则offsetParent为最近的table元素对象或根元素（标准模式下为html；quirk...
offsetLeft、offsetTop、offsetWidth、offsetHeight属性
diaozhen9799的博客
09-23 302
首先让我们先看一看element.offsetLeft属性。 支持的浏览器：InternetExplorer4.0+，Mozilla1.0+，Netscape6.0+，Opera7.0+，Safari1.0+ 定义：返回一个像素数值，它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量。 句法： leftDis=elem...
HTMLElement.scptd：用于构建HTML的AppleScript模块
02-13
HTMLElement HTMLElement是一个AppleScript库，可通过编程重新设置HTML文档的结构。 您可以通过布置合理的面向对象的界面，通过脚本对象构建HTML文档的结构。 并且对象structre可以输出格式良好HTML数据。 当一种...
如何判断元素是否为HTMLElement元素
09-04
总的来说，判断一个对象是否为`HTMLElement`元素，我们需要结合`nodeType`属性和尝试操作DOM的手段来确保准确性。这样可以避免因自定义对象的干扰而产生的误判，同时也覆盖了`window`和`document`这两个特殊的DOM...
连续操作HTMLElement对象图文解决方法
09-06
在实际编程中，我们经常需要对`HTMLElement`对象进行一系列的操作，例如添加子元素、设置属性、修改样式等。然而，有些开发者可能尝试在`HTMLElement`对象上使用`Object.prototype`上的方法，却发现这些方法不起作用...
将HTML格式的String转化为HTMLElement的实现方法
09-04
然后，通过设置`el.innerHTML`属性，我们可以将HTML字符串赋值给这个元素，从而将其转化为包含HTML结构的HTMLElement。 ```javascript el.innerHTML = '<html>...</html>'; ``` 在这个过程中，`innerHTML`属性将...
offsetParent、offsetLeft/offsetTop深度剖析
weixin_34293141的博客
12-22 412
element.offsetParent 定义 element.offsetParent为包含element的祖先元素中，层级最近的定位元素。 也就是说，offsetParent必须满足三个条件： 是element的祖先元素 最靠近element 是定位元素，即position属性不为static &lt;div class="position-outer" style="position: ...
element.style.left 和 element.offsetLeft 的区别
weixin_45840253的博客
08-18 405
1.element.style.left 只能获取行内样式， 2element.offsetLeft 当父级元素节点是定位时，获取的值则是相对父级的位置否则是相对body的位置的值 3.element.offsetLeft 获取的值是只读 element.style.left 是可读写
类型“Element”上不存在属性“offsetTop”
浮游的博客
07-11 4050
记录一次类型错误的解决方案，ts报错类型“Element”上不存在属性“offsetTop”。因为ts默认用的是Element，需要声明为HTMLElement 或是下面这样 当然如果你用的是angular的话，建议用 ElementRef
OffSet家族1-offsetParent
Yannnnnm的博客
12-18 248
说到offset家族，我们分为三个点来分析： offsetParent offsetTop、offsetLeft offsetWidth、offsetHeight 下面我们逐条分析： offsetParent 首先我们先看一下官方的定义： HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 “none” 时，offsetParent
offsetTop、clientTop、scrollTop等属性详解【概念+详细例子分析】
hannah2233的博客
12-24 5709
1、 offsetTop、offsetLeft2、 offsetWidth、offsetHeight3、 offsetX、offsetY1、 clientWidth、clientHeight2、 clientTop、clientLeft3、 clientX、clientY1、 scrollWidth、scrollHeight2、 scrollTop、scrollLeft
【html】offsetParent--＞offsetleft&offsettop
sylbiubiubiu的博客
09-01 200
offsetleft&offsettop
Element属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
socaicaicaicai的博客
12-09 1291
Element属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTopElement属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTopclientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度。clientHeightoffsetHeightscrollHeightscrollTopoffsetTop Element属性学习之
花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight
qq_40574071的博客
07-20 1600
一、经典图解读 先放上一张经典图 看不懂，没关系！接下来耐心看完必然有不一样的收获。 我们常遇到的是实际是这么几个属性： offsetTop clientHeight scrollTop scrollHeight 如果不把它们弄清楚就会导致每次遇到时都混淆不清，下面就逐一看看这么些属性。 （1）offsetTop HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部内边距的距离。--MDN 【巧记】offset本身就是..
html dom.parent,HTML DOM offsetParent用法及代码示例
weixin_31083901的博客
06-26 144
在HTML中，offsetParent属性用于返回元素的最接近的祖先。返回的祖先的位置必须不是静态的。如果将元素设置为display =“ none”，则offestParent属性将返回null值。用法:object.offsetParent;此属性用于返回元素的offsetParent。此方法没有默认值。 offsetParent是有用的属性，因为offsetTop和offsetLeft相对于...
下面这个TS类型错误怎么解决:Type 'Element' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 114 more.
最新发布
06-12
这个错误是因为 TypeScript 无法确定 'Element' 类型是一个具体的 HTMLElement 类型。在 TypeScript 中，Element 是一个较为抽象的类型，它代表了所有 HTML 元素的基础接口。而 HTMLElement 是 Element 的一个具体实现，它扩展了 Element 接口，添加了一些常用的属性和方法。 要解决这个错误，需要将 'Element' 类型转换为具体的 HTMLElement 类型。可以使用类型断言来实现这一点，例如： ```typescript const element: Element = document.querySelector('#my-element'); const htmlElement = element as HTMLElement; ``` 这里通过将 Element 类型强制转换为 HTMLElement 类型来解决了类型不匹配的问题。在 TypeScript 中，类型断言是一种将一个值强制转换为指定类型的方式，可以使用 as 关键字或尖括号语法实现。 另一种解决方法是使用类型保护，例如： ```typescript const element: Element = document.querySelector('#my-element'); if (element instanceof HTMLElement) { // 在这个作用域内，element 被类型推断为 HTMLElement 类型 element.accessKey = 'A'; } ``` 这里使用 instanceof 关键字来判断 element 是否是 HTMLElement 类型，如果是，则可以在 if 语句块中安全地使用 HTMLElement 的属性和方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值