获取元素在页面中的位置
绝对位置:到body的距离
相对位置:到视口的距离
本身定位为fixed
==> offsetParent:null（不是火狐）
offsetTop和offsetLeft也是参照于body的
==> offsetParent:body（火狐）
本身定位不为fixed
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
function getPointAb(node){ //while循环叠加offsetParent的offsetTop和offsetLeft var x =0; var y = 0; while(node){ x+=node.offsetLeft; y+=node.offsetTop; node = node.offsetParent; } return {x:x,y:y}; }
<!DOCTYPE html> <html id="html"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #wrap{position: absolute;background: pink;left: 200px;top: 200px;} #inner1{position: absolute;background: deeppink;left: 150px;top: 150px;} div{ 200px; height: 200px; } </style> </head> <body id="body" > <div id="wrap">wrap <div id="inner1"> inner1 </div> </div> </body> <script type="text/javascript"> /* 获取元素在页面中的位置 绝对位置:到body的距离 相对位置:到视口的距离 本身定位为fixed ==> offsetParent:null（不是火狐） offsetTop和offsetLeft也是参照于body的 ==> offsetParent:body（火狐） 本身定位不为fixed 父级没有定位 ==> offsetParent:body 父级有定位 ==> offsetParent:定位父级 */ window.onload=function(){ var inner1 = document.querySelector("#inner1"); var point = getPointAb(inner1); console.log(point); //boder margin会影响这个函数的取值 function getPointAb(node){ //while循环叠加offsetParent的offsetTop和offsetLeft var x =0; var y = 0; while(node){ x+=node.offsetLeft; y+=node.offsetTop; node = node.offsetParent; } return {x:x,y:y}; } } </script> </html>
*/