HTMLElement属性：offsetParent,offsetLeft,offsetTop

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重叠是为什么

HTMLElement属性：offsetParent,offsetLeft,offsetTop相关推荐

理清offsetparent()、offsetLeft/offsetTop、offset()、position()
简而言之,它们的概念如下: ① offsetparent() 指的是元素的第一级拥有定位属性(absolute/relative/fixed)的父元素. ② offsetLeft/offsetTop ...
深度剖析offsetParent、offsetTop、offsetLeft和ParentNode的区别
深度剖析offsetParent.offsetTop.offsetLeft和ParentNode的区别 ParentNode: 是直接结构上的父级,并不是显示父级 offsetParent: 有点类似 ...
对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解
如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop 在刚开始使用的时候总是不能理解这四个有什么不一样,用在哪里,因为这几个词真的太像了,emmm,总 ...
offsetParent、offsetTop、offsetLeft、offsetHeight、offsetWidth
1.offsetParent:获取第一个定位的父元素,如果所有父元素都没有定位,则返回body: <!DOCTYPE html> <html lang="en"& ...
一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
offsetParent, offsetLeft, offsetWidth, clientWidth
offsetParent 如果当前元素的style.position=fixed或者style.display=none,那么offsetParent=null 如果当前元素的父级元素没有进行CSS定 ...
html中offsetleft属性,JavaScript offsetLeft属性值简介说明
摘要: 下文讲述dom对象之offsetLeft属性值的功能简介说明,如下所示: DOM之offsetLeft属性值说明 DOM之offsetLeft属性值功能说明: offsetLeft属性值用于返 ...
DOM之parentNode与offsetParent
DOM中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,el ...
js（76-108）
76案例用户名<input type="text" id="username">密码<input type="password&q ...

HTMLElement属性：offsetParent,offsetLeft,offsetTop

HTMLElement属性：offsetParent,offsetLeft,offsetTop相关推荐

最新文章

热门文章