parentNode 直接父级//和offsetParent不同
inner2.parentNode
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#inner2{
position: absolute;
}
#wrap{
position: relative;
}
</style>
</head>
<body id="body">
<div id="wrap">wrap
<div id="inner1">inner1
<div id="inner2">inner2</div>
</div>
</div>
</body>
<script type="text/javascript">
//hmtl css js
window.onload=function(){
//parentNode 直接父级
var inner2 = document.querySelector("#inner2");
console.log(inner2.parentNode.id);
}
</script>
</html>
offsetParent
a.有点类型于css中包含块(css中的概念)的概念 b.offsetLeft 和 offsetTop都是参照于offsetParent的内边距边界 c.规则(html和body之间的margin被清除)
本身定位为fiexd,不管你父级有没有定位
存在兼容性问题 火狐的offsetParent --> body
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{position: absolute;}
#inner1{position: fixed;}
#inner2{position: relative;}
#inner3{position: fixed;}
</style>
</head>
<body id="body">
<div id="wrap">wrap
<div id="inner1">inner1
<div id="inner2">inner2
<div id="inner3">3</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*
ev||event
鼠标滚轮
事件绑定
offsetParent
1.父级是否有定位(4种)
2.本身是否有定位(4种)
3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8))
4*4*8 = 128
本身定位为fixed
==> offsetParent:null(不是火狐)
==> offsetParent:body(火狐)
本身定位不为fixed
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
*/
window.onload=function(){
console.log(inner3.offsetParent)
}
</script>
</html>
非fixed
父级没有定位
offsetParent --> body
父级有定位
offsetParent --> 定位父级
fixed 不管你有没有定位都根据body
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{position: absolute;}
#inner1{position: fixed;}
#inner2{position: relative;}
#inner3{position: fixed;}
</style>
</head>
<body id="body">
<div id="wrap">wrap
<div id="inner1">inner1
<div id="inner2">inner2
<div id="inner3"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*
ev||event
鼠标滚轮
事件绑定
offsetParent
1.父级是否有定位(4种)
2.本身是否有定位(4种)
3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8))
4*4*8 = 128
本身定位为fixed
==> offsetParent:null(不是火狐)
==> offsetParent:body(火狐)
本身定位不为fixed
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
*/
window.onload=function(){
console.log(inner3.offsetParent)
}
</script>
</html>
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
overflow: hidden;
}
#wrap{position: absolute;background: pink;left: 100px;top: 50px;}
#inner1{position: fixed;background: deeppink;left: 50px;top: 150px;}
#inner2{position: relative;background: hotpink;left: 80px;top: 70px;}
#inner3{position: fixed;background: yellow;left: 60px;top: 30px;}
div{
width: 200px;
height: 200px;
padding: 50px;
border: 10px solid;
}
</style>
</head>
<body id="body">
<div id="wrap">wrap
<div id="inner1">inner1
<div id="inner2">inner2
<div id="inner3">inner3</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*
*
ev||event
鼠标滚轮
事件绑定
offsetParent
1.父级是否有定位(4种)
2.本身是否有定位(4种)
3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8))
4*4*8 = 128
本身定位为fixed
==> offsetParent:null(不是火狐)
offsetTop和offsetLeft也是参照于body的
==> offsetParent:body(火狐)
本身定位不为fixed
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
*/
window.onload=function(){
console.log(inner3.offsetTop,inner3.offsetLeft)
}
</script>
</html>