原生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。
原生js中offsetTop, offsetLeft与offsetParent的详细讲解的更多相关文章
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- 原生js中slice()方法和splice()区别
slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...
- ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题
问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- koa 基础（十七）原生 JS 中的类、静态方法、继承
1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...
- Vditor在原生JS中如何结合后端使用
目录 1.Vditor介绍 2.如何在原生JS中结合后端使用 2.1 背景 2.2 正确使用方式 2.2.1 编辑页面 2.2.2 回显页面(修改页面) 2.2.3 预览页面 3.小结一下 1.Vdi ...
- js中的offsetLeft和style.left
(1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...
- JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
这里是javascript中制作滚动代码的常用属性 页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见 ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
随机推荐
- 实践GoF的设计模式：单例模式
摘要:单例模式虽然简单易用,但也是最容易被滥用的设计模式.它并不是"银弹",在实际使用时,还需根据具体的业务场景谨慎使用. 本文分享自华为云社区<[Go实现]实践GoF的23 ...
- webpack性能优化(2)：splitChunks用法详解
之前写的<webpack性能优化(0):webpack性能优化概况-优化构建速度>.<webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载> 如果使用vue-c ...
- 火山引擎DataLeap背后的支持者 - 工作流编排调度系统FlowX
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 背景介绍 业务场景 在日常工作中,我们时不时需要对某些逻辑进行重复调度,这时我们就需要一个调度系统.根据不同的调度 ...
- 收钱吧与火山引擎VeDI合作一年后 有了哪些新变化？
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 收钱吧正在和火山引擎数智平台(VeDI)跑出一条业务提效新通路. 相关数据显示,收钱吧的日服务人次就近 ...
- Java 项目工程搭建 --创建子模块(Spring Initializr)
一下篇,常用 Java 项目工程搭建 --创建子模块(依赖父工程) 也不算常用,常用的是 ctrl+c.ctrl+v ,哈哈 Package要手动改下,生成的很丑 选能支持 Alibaba Cl ...
- NOKOV动作捕捉系统使多场协同无人机自主建造成为可能
近年来,工业机器人的兴起使得建造的效率和安全性得以提升,但由于机器人由于大小与活动范围的限制,在大型建筑上难以施展拳脚.上海同济大学建筑系的无人机自主建造小组,正在进行以无人机取代工业机器人进行空中建 ...
- 第六届蓝桥杯C++C组 A~F题题解
蓝桥杯历年国赛真题汇总:Here 1. 分机号 X老板脾气古怪,他们公司的电话分机号都是3位数,老板规定,所有号码必须是降序排列,且不能有重复的数位.比如: 751,520,321 都满足要求,而, ...
- Python | PyQt5 Could not find the Qt platform plugin windows错误解决方法
在写Python大作业的时候发现运行PyQt5时有报错 出现该问题的原因是环境变量没有添加. 解决方法: 在环境变量中增加: QT_QPA_PLATFORM_PLUGIN_PATH 样例路径(这里填你 ...
- freeswitch查看所有通道变量
概述 freeswitch 是一款好用的开源软交换平台. 实际应用中,我们经常需要对fs中的通道变量操作,包括设置和获取,set & get. 但是,fs中有众多的内部定义通道变量,也有外部传 ...
- shell 脚本之 disk_monitor
编写脚本实现监测指定文件夹的磁盘空间. =========================================================== ## 脚本逻辑介绍 用户通过 --p ...