1. parentNode:父亲节点 HTML结构层级关系中的上一级元素
center.parentNode
2. offsetParent:父级参照物 在通一个平台中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系）
一般来说一个页面中所有元素的腹肌参照物都是body
通过设置
position: relative;
position: absolute;
position: fixed;
可以改变父级参照物
3.offsetTop/offsetLeft:当前元素(外边框)距离其父级参照物(内边框)的偏移距离
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
/* position: absolute;
position: relative;
position: absolute;
position: fixed;
position: static;
position: inherit;*/
}
#outer{
margin: 50px auto;
padding: 50px;
180px;
height: 180px;
border: 10px solid #000000;
background: orange;
}
#inner{
padding: 50px;
80px;
height:80px;
background: green;
/*position: relative;*/
border: 10px solid #000000;
}
#center{
50px;
height: 50px;
border: 10px solid #000000;
background: red;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="center"></div>
</div>
</div>
<script type="text/javascript">
var outer=document.getElementById("outer"),
inner=document.getElementById("inner"),
center=document.getElementById("center");
// 父亲节点 HTML结构层级关系的上一级元素
center.parentNode// inner
inner.parentNode// outer
/* console.log(center.offsetParent);
console.log(inner.offsetParent);
console.log(outer.offsetParent);*/
function offset(curEle){
var par =curEle.offsetParent,
totalLeft=null, totalTop=null;
totalLeft+=curEle.offsetLeft;
totalTop+=curEle.offsetTop;
while(par){
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);
</script>
</body>
</html>