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简单方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
js 获取元素在页面上的偏移量的方法汇总
使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚动量(scroll)获得. 1.获取相对与document的偏移量 function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetP
-
取得元素的左和上偏移量的方法
function getElementLeft(element) { var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current!==null) { actualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft; } 取得元素的左偏移量: function getEleme
-
jQuery抛物线运动实现方法(附完整demo源码下载)
本文实例讲述了jQuery抛物线运动实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>抛物线运动效果</title> <style type="text/css"> .boll
-
js获取元素的偏移量offset简单方法(必看)
前言:以前一直是看别人写的,然后学习点东西,现在也把自己的学习记录下来,给大家一个学习的机会,欢迎大家多多评论和推荐哈,共同进步.竟然还有六个人关注我了 ,哈哈 开心.我会继续写下去的.. null和undefined都代表没有,但是null是属性存在值不存在,undefined是连这个属性都不存在 //例如 document.parentNode//浏览器天生自带的一个属性:父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了,它没有父亲) document.pare
-
php获取ip及网址的简单方法(必看)
如下所示: echo 'http://'.$_SERVER['HTTP_HOST'];输出您访问网址的域名 echo $benji_ip=gethostbyname($_ENV['COMPUTERNAME']);输出服务器的ip $fangwen_ip=$_SERVER["REMOTE_ADDR"]; 输出访问者的外网ip 以上这篇php获取ip及网址的简单方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
js两种拼接字符串的简单方法(必看)
如下所示: function(msgArr) { var len = msgArr.length; var n = 0 ; var htmlSpan = ""; for (var j = 0; j < len - 1; j++) { htmlSpan += '<span>·</span>'; } htmlSpan += '<span class="on">·</span>'; var imgs = []; var
-
js获取元素外链样式的方法
本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge
-
js删除数组元素、清空数组的简单方法(必看)
一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删除数组元素 var ary = [1,2,3,4]; ary.splice(0,1); 或 ary.splice($.inArray(2, ary), 1); 其中$.inArray(2, ary)用来查找某元素在数组中的索引位置. 三,js 删除数组几种方法 var arr=['a','b','c
-
Python win32com 操作Exce的l简单方法(必看)
实例如下: from win32com.client import Dispatch import win32com.client class easyExcel: """A utility to make it easier to get at Excel. Remembering to save the data is your problem, as is error handling. Operates on one workbook at a time."
-
java 获取HttpRequest Header的几种方法(必看篇)
在开发应用程序的过程中,如果有多个应用,通常会通过一个portal 门户来集成,这个portal 是所有应用程序的入口,用户一旦在portal 登录之后,进入另外一个系统,就需要类似的单点登录(SSO). 进入各个子系统的时候,就不需要再次登录, 当然类似的功能,你可以通过专业的单点登录软件来实现,也可以自己写数据库token 等方式来实现.其实还有一个比较简单的方法,就是通过 portal 封装已经登录过的用户的消息,写到http header 之中,然后把请求forward 到各个子系统中
-
jquery 动态增加,减少input表单的简单方法(必看)
html代码如下 <html> <tr><button style="margin-left:10px" class="add_field_button btn">Add</button></tr> <tbody class="input_fields_wrap"></tbody> </html> js代码如下 <script> var m
-
js判断文件格式及大小的简单实例(必看)
实例如下: //判断照片大小 function getPhotoSize(obj){ photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名 if(photoExt!='.jpg'){ alert("请上传后缀名为jpg的照片!"); return false; } var fileSize = 0; var isIE = /msie/i.test(navigator
-
减少C++代码编译时间的简单方法(必看篇)
c++ 的代码包含头文件和实现文件两部分, 头文件一般是提供给别人(也叫客户)使用的, 但是一旦头文件发生改变,不管多小的变化,所有引用他的文件就必须重新编译,编译就要花时间,假如你做的工程比较大(比如二次封装chrome这类的开发),重新编译一次的时间就会浪费上班的大部分时间,这样干了一天挺累的, 但是你的老板说你没有产出,结果你被fired, 是不是很怨啊, 如果你早点看到这段文章,你就会比你的同事开发效率高那么一些,那样被fired就不会是你了,你说这篇文章是不是价值千金!开个玩笑 :)