offsetParent
<!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> div{ padding:40px 50px;} #div1 { background:red;} #div2 { background:blue; position:relative;} #div3 { background:orange;} </style> <script type="text/javascript"> window.onload = function() { var oDiv3 = document.getElementById('div3'); //parentNode //alert(oDiv3.parentNode); //元素.offsetParent 只读属性 离当前元素最近的有定位的父节点 //如果没有定位父级，默认是body //ie7以下，如果当前元素下有定位，默认是body,ie7下如果有定位则是html //ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向的触发了layout特性的节点 alert(oDiv3.offsetParent.id); } </script> </head> <body id="body"> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> </body> </html>
offsetLeft,offsetTop在各浏览器中的表现差异
<!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> div{ padding:40px 50px;} #div1 { background:red;} #div2 { background:blue; position:relative;} #div3 { background:orange;} </style> <script type="text/javascript"> window.onload = function() { var oDiv3 = document.getElementById('div3'); /* offsetLeft:只读属性 当前 元素以定位父级的距离（偏移值） 到当前元素的offsetParent的距离 如果没有定位父级 offsetParent -> body offsetLeft[html] -> html 如果有定位父级 ie7：如果自己没有定位，那么offsetLeft[Top]是到body的距离 如果自己有定位，那么就是到定位父级的距离 其它：到定位父级的距离 */ alert(oDiv3.offsetLeft); } </script> </head> <body id="body"> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> </body> </html>
获取元素结点到页面的绝对距离的方式
<!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> div{ padding:40px 50px;} #div1 { background:red;} #div2 { background:blue; position:relative;} #div3 { background:orange;} </style> <script type="text/javascript"> window.onload = function() { var oDiv3 = document.getElementById('div3'); //alert(oDiv3.offsetLeft); /*var iTop = 0; var obj = oDiv3; while(obj) { alert(obj.id + ':' + obj.offsetTop); iTop += obj.offsetTop; obj = obj.offsetParent; alert(obj + obj.id); }*/ //alert(iTop); var p = getPos(oDiv3); alert(p.left); //获取元素结点到页面的绝对距离的方式 function getPos(obj) { var pos = {left:0,top:0}; while(obj) { pos.left += obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent; } return pos; } } </script> </head> <body id="body"> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> </body> </html>