JavaScript获取元素相对于document的偏移量
分类:实例代码
本章节分享一段代码实例,它实现获取指定元素在文档中偏移量的效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> *{ margin:0px; padding:0px; } #box{ width:200px; height:150px; background:#ccc; position:absolute; left:100px; top:200px; } #inner{ width:100px; height:50px; background:blue; margin:20px; text-align:center; } </style> <script type="text/javascript"> function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetParent; } return { top:top, left:left } } window.onload=function(){ var odiv=document.getElementById("inner"); odiv.innerHTML=getOffsetSum(odiv).top+"<br/>"; odiv.innerHTML=odiv.innerHTML+getOffsetSum(odiv).left; } </script> </head> <body> <div id="box"> <div id="inner"></div> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function getOffsetSum(ele){},此方法实现了我们的要求,参数是要获取偏移量的元素对象。
(2).var top= 0,left=0,声明两个变量并赋初值为0。
(3).while(ele){
top+=ele.offsetTop;
left+=ele.offsetLeft;
ele=ele.offsetParent;
},通过递归的方式来累加获取值。
(4).return {
top:top,
left:left
},返回一个包含偏移量的对象。
二.相关阅读:
(1).offsetTop可以参阅js offsetTop一章节。
(2).offsetParent可以参阅js offsetParent一章节。
(3).while可以参阅javascript while语句一章节。
(4).innerHTML属性可以参阅js innerHTML一章节。