原生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,原型链,就能获得认可.但是现在 ...
随机推荐
- 云小课 | 一分钟了解AppCube中的应用
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:应用魔方(AppC ...
- 火山引擎ByteHouse联合Apache Airflow，让数据管理更加高效
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎ByteHouse 正式宣布与 Apache Airflow 兼容,两者结合不仅可以高效地存储和 ...
- 使用 quartz-solon-plugin 开发定时任务（新）
(一)新建一个 maven 空项目 (二)添加 maven 引用 <dependency> <groupId>org.noear</groupId> <art ...
- Linux 升级安装 Python 3
百度飞桨 PaddlePaddle 2.4.0 => Python 3.7.4 PaddlePaddle 2.4.1+ => Python 3.9.0 下载 # 安装依赖 [root@lo ...
- Bug定级实例
*1级,**系统崩溃* *定义:*严重阻碍测试和开发工作 *对应**优先级**:**最高* *具体可分为:* 1.功能完全没有实现 2.应用闪退/崩溃无法运行 3*.应用必现安全模式,无法运行* 4. ...
- python os模块 高频函数（未完待续）
os.listdir 返回目录下所有的文件,包括文件和文件夹 例如:当前文件夹下为: >>> import os >>> os.listdir() ['Annota ...
- 【django-vue】前后端分离项目
博客目录 pip永久换源 虚拟环境搭建 项目前后端创建 项目目录调整 封装logger 封装全局异常 封装response 数据库配置 用户表继承AbstractUser配置 开放media访问 路飞 ...
- Three.js 入门
Demo代码地址: https://gitee.com/s0611163/three.js-demo Three.js Three.js下载 从GitHub上下载一个Release版本,https:/ ...
- 三、java连接mongo数据库
系列导航 一.linux单机版mongo安装(带密码验证) 二.mongo集群搭建 三.java连接mongo数据库 四.java对mongo数据库增删改查操作 五.mongo备份篇 mongoexp ...
- CSS3 ------- object-fit属性
做项目经常会遇到图片列表展示,图片一般是用户从后台上传的,上传的图片尺寸千差万别.如果前端不控制图片大小,整个排版就会很乱,如果给定长宽,图片又会变形,用背景图片来处理有特别麻烦.这个问题一直苦恼了我 ...