原生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,原型链,就能获得认可.但是现在 ...
随机推荐
- 面试官：说一下Jena推理
摘要:本文介绍了Jena的推理子系统,并构建了一个简单的RDF图.基于该RDF图,我们搭建了一个Jena推理引擎,并进行自动化推理. 本文分享自华为云社区<知识推理之基于jena的知识推理(三) ...
- 带你聚焦GaussDB(DWS)存储时游标使用
摘要:游标是一种数据处理方法,提供了在查询结果集中进行逐行遍历浏览数据的方法,也可以将游标当做上下文区域的句柄或者指针,借助游标对指定位置的数据进行查询与处理. 本文分享自华为云社区<Gauss ...
- HIVE报错 need to specify partition columns because the destination table is partitioned
解决 分区需要指定分区 insert into table XXX partition(分区='')
- Kubernetes(K8S) 镜像拉取策略 imagePullPolicy
镜像仓库,镜像已更新,版本没更新, K8S 拉取后,还是早的服务,原因:imagePullPolicy 镜像拉取策略 默认为本地有了就不拉取,需要修改 [root@k8smaster ~]# kube ...
- Dependencies unknown
Dependencies unknown 由父POM 托管 <properties> <boot-admin.version>2.3.0</boot-admin.vers ...
- Mac下安装mysqlclient出错解决「mysql_config not found」
错误信息如下图 解决方法 安装mysql-client brew install mysql-client 设置环境变量 export PATH=$PATH:/usr/local/Cellar/mys ...
- 🤗 Datasets 使用小贴士: 探索解决数据集无法下载的问题
Hugging Face Hub 是强大的机器学习的数据源.相信大家在国内用 Hugging Face Datasets 都遇到过下载的问题.譬如: import datasets dataset = ...
- lab3 page tables
1.Speed up system calls (easy) 要求:有些操作系统(例如 Linux)通过在用户空间和内核之间的只读区域共享数据来加速某些系统调用.这样可以消除在执行这些系统调用时进行内 ...
- 如何利用CCXT交易数字货币合约
更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 对于币圈量化老司机来说,相信或多或少都有接触过ccxt这个接口,ccxt为我们提供了多交易所统一的标准格 ...
- KYOCERA Programming Contest 2021（AtCoder Beginner Contest 200）（AB水题，C思维，D搜索，E DP）
补题链接:Here A - Century 整除 \(200\) 并且判断能否整除完全 B - 200th ABC-200 按题意即可 C - Ringo's Favorite Numbers 2 求 ...