js获取元素的偏移量offset简单方法(必看)
更新时间：2017年07月05日 08:28:30 投稿：jingxian
下面小编就为大家带来一篇js获取元素的偏移量offset简单方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言：以前一直是看别人写的，然后学习点东西，现在也把自己的学习记录下来，给大家一个学习的机会，欢迎大家多多评论和推荐哈，共同进步。竟然还有六个人关注我了 ，哈哈 开心。我会继续写下去的。。
null和undefined都代表没有，但是null是属性存在值不存在，undefined是连这个属性都不存在
//例如
document.parentNode//浏览器天生自带的一个属性：父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了，它没有父亲)
document.parentnode//undefined (因为没有parentnode这个属性)
1、parentNode:父亲节点 HTML结构层级关系中的上一级元素
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var center = document.getElementById('center');
center.parentNode //inner
2、offsetParent：父级参照物 在同一个平面中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系）
一般来说一个页面中所有元素的父级参照物都是body
document.body.offsetParent // null
想要改变父级参照物需要通过position定位来进行改变（absolute relative fixed 都可以进行改变 ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#outer{
width:180px;
height:180px;
margin:50px auto;
border:10px solid #000;
background:orange;
padding:50px;
}
#inner{
width:80px;
height:80px;
padding:50px;
border:10px solid #000;
background:green;
}
#center{
width:50px;
height:50px;
border:10px solid #000;
background:red;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="center"></div>
</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var center = document.getElementById('center');
outer.style.position = "relative";//这样inner和center的参照物都是outer
center.offsetParent//outer
inner.offsetParent//outer
outer.offsetParent//body
outer.style.position = "relative";//
inner.style.position = "relative";
center.offsetParent//inner
inner.offsetParent//outer
outer.offsetParent//body
</script>
</body>
</html>
3、offsetTop/offsetLeft :当前元素（外边框）距离其父级参照物（内边框）的偏移距离
具体如下图所示：
下面是一个offset方法：等同于jQuery中的offset方法，实现获取页面中任意一个元素，距离body的偏移（包含左偏移和上偏移），不管当前元素的父级参照物是谁。获取的一个结果是一个对象{left:距离BODY的左偏移，top:距离BODY的上偏移}
在标准的IE8浏览器中，我们使用offsetLeft/offsetTop其实是把父级参照物的边框已经算在内了。所以我们不需要自己在单独加边框了
代码如下：
function offset(curEle){
var totalLeft = null,totalTop = null,par = curEle.offsetParent;
//首先加自己本身的左偏移和上偏移
totalLeft+=curEle.offsetLeft;
totalTop+=curEle.offsetTop
//只要没有找到body，我们就把父级参照物的边框和偏移也进行累加
while(par){
if(navigator.userAgent.indexOf("MSIE 8.0")===-1){
//累加父级参照物的边框
totalLeft+=par.clientLeft;
totalTop+=par.clientTop
}
//累加父级参照物本身的偏移
totalLeft+=par.offsetLeft;
totalTop+=par.offsetTop
par = par.offsetParent;
}
return{
left:totalLeft,
top:totalTop
}
}
console.log(offset(center).left)
以上这篇js获取元素的偏移量offset简单方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了完美实现仿QQ空间评论回复特效，非常的实用，附上实例代码给大家，有需要的小伙伴参考下吧。2015-05-05
本文主要介绍了js实现图片左右滚动效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
rest参数和扩展运算符都是ES6新增的特性。下面这篇文章主要给大家介绍了关于ES6中rest参数与扩展运算符的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
用js生成按钮，动态生成8位随机数的脚本2008-09-09
用js实现输入提示(自动完成)的实例代码，需要的朋友可以参考一下2013-06-06
MinIO是一款基于Go语言的高性能对象存储服务,非常适合于存储大容量非结构化的数据,例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等,这篇文章主要给大家介绍了关于前端使用minio传输文件的相关资料,需要的朋友可以参考下2024-07-07
图例组件展现了不同系列的标记(symbol),颜色和名字,可以通过点击图例控制哪些系列不显示,这篇文章主要给大家介绍了关于Echarts图例组件的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了JS实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
在JavaScript中处理字符串是一项常见的任务,而去除字符串中的指定子字符串则是其中的一个重要操作,这篇文章主要给大家介绍了关于JavaScript字符串中replace方法的相关资料,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了JS+CSS实现DIV层的展开、收缩效果，以两个完整实例介绍了JS控制DIV层的展开、收缩效果，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论