原生js中offsetTop, offsetLeft与offsetParent的详细讲解

简介: 原生js中offsetTop, offsetLeft与offsetParent的详细讲解

简单说下:offsetTop

offsetTop: 为只读属性。 返回的是一个数字。
它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。
它等价于offsetTop==>元素到offsetParent顶部内边距的距离
offsetTop并不是指距离浏览器窗口最左边的位置。
我的理解:offsetTop的偏移是指当前元素相对其距离自己最近的具有定位属性的父级元素的偏移值。
margin:会影响它的值。 定位的值会影响。 border也会影响。但是padding不会影响。
offsetLeft跟offsetTop是一样的。他们是一对的。
换一句话说:
offsetLeft 可以返回当前元素距离某个父辈元素左边缘的距离:
如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离。
如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离。

offsetTop 的简单使用

<body>
    <div id="title">
        我是标题
    </div>
    <div id="nav">
        我是导航
    </div>
    <div id="cont">
        我是内容
    </div>
</body>
<script>
    let cont = document.getElementById('cont')
    let dingbuTop = cont.offsetTop;
    console.log('dingbuTop', dingbuTop); //输出的是50
    /* 之所以是50=21+21+*
        div的默认高度是21;有两个div。 body的外边距margin:8px;
    */
</script>

margin 会影响它的值(margin-bottom也不会), border也会影响,padding不会

<style>
    #cont {
        padding: 10px;
        background: red;
        margin-top: 50px;
    }
</style>
<body>
    <div id="title">
        我是标题
    </div>
    <div id="nav">
        我是导航
    </div>
    <div id="cont">
        我是内容
    </div>
</body>
<script>
    let cont = document.getElementById('cont')
    let dingbuTop = cont.offsetTop;
    // body的外边距margin:8px;div的默认高度是21;有两个div。
    //padding 并没有影响它的值
    console.log('dingbuTop', dingbuTop); //输出的是 8+21+21+50=100
</script>

定位会影响它的值

<style>
        #cont {
            background: red;
            position: absolute;
            top: 150px;
            left: 150px;
        }
    </style>
<body>
    <div id="title">
        我是标题
    </div>
    <div id="nav">
        我是导航
    </div>
    <div id="cont">
        我是内容
    </div>
</body>
<script>
    let cont = document.getElementById('cont')
    let dingbuTop = cont.offsetTop;
    console.log('dingbuTop', dingbuTop); //输出的是150
</script>

当前元素相对其距离自己最近的具有定位属性的父级元素的偏移

<style>
#cont {
    margin-top: 100px;
    position: relative;
}
#son {
    background: pink;
    position: absolute;
    left: 10px;
    top: 10px;
}
</style>
<body>
    <div id="cont">
        <div id="son">
            son
        </div>
    </div>
</body>
<script>
    let son = document.getElementById('son')
    let dingbuTop = son.offsetTop;
    console.log('dingbuTop', dingbuTop);  //输出的10
</script>

子绝父相-子元素距离屏幕顶部的距离

<style>
    #cont {
        margin-top: 100px;
        position: relative;
        background: #000;
    }
    #son {
        background: pink;
        position: absolute;
        left: 10px;
        top: 10px;
    }
</style>
<body>
    <div id="cont">
        <div id="son">
            son
        </div>
    </div>
</body>
<script>
let son = document.getElementById('son')
let dingbuTop = son.offsetTop + son.offsetParent.offsetTop;
console.log('dingbuTop', dingbuTop); //输出的是 110
</script>

offsetParent

HTMLElement.offsetParent 是一个只读属性.
返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 table, td, th, body 元素。
当元素的 style.display 设置为 "none" 时,offsetParent 返回 null。
等价于offsetParent:返回指向最近的一个具有定位的祖宗元素(relative,absolute,fixed)。
若祖宗都不符合条件,offsetParent为body。
<div id="cont">
    <div id="son1">
        son1
    </div>
    <div id="son">
        son
    </div>
</div>
let son = document.getElementById('son')
let ele = son.offsetParent;
console.log('ele', ele); // 输出的是body这个元素 若祖宗都不符合条件,offsetParent为body。

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
10天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
17 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
34 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
3月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
38 0
|
3月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
34 0
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
4月前
|
JavaScript
js 一键复制到剪贴板(原生js实现)
js 一键复制到剪贴板(原生js实现)
31 0
|
5月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
85 0
|
5月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
204 0
|
5月前
|
JavaScript 前端开发
原生JS如何查询元素属性
原生JS如何查询元素属性
41 0