注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

家居装饰

让每一个人都拥有漂亮的舒服的家!

 
 
 

日志

 
 

[转]js获取页面元素位置函数(浏览器兼容)  

2008-09-17 09:53:57|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

用Javascript获取指定页面元素的位置是一个非常常见的需求,本文介绍的函数能够准确返回一个元素相对于整个文档左上角的坐标,即元素的 top 、left 的位置,而且能够兼容浏览器,相信对新手非常有用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>a</title>

<script>

function getElementPos(elementId) {

var ua = navigator.userAgent.toLowerCase();

var isOpera = (ua.indexOf('opera') != -1);

var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof

var el = document.getElementById(elementId);

if(el.parentNode === null || el.style.display == 'none') {

   return false;

}     

var parent = null;

var pos = [];    

var box;    

if(el.getBoundingClientRect)    //IE

{        

   box = el.getBoundingClientRect();

   var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

   var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

   return {x:box.left + scrollLeft, y:box.top + scrollTop};

}else if(document.getBoxObjectFor)    // gecko   

{

   box = document.getBoxObjectFor(el);

   var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;

   var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;

   pos = [box.x - borderLeft, box.y - borderTop];

} else    // safari & opera   

{

   pos = [el.offsetLeft, el.offsetTop];

   parent = el.offsetParent;    

   if (parent != el) {

    while (parent) {

   pos[0] += parent.offsetLeft;

   pos[1] += parent.offsetTop;

   parent = parent.offsetParent;

    }

   }  

   if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) {

    pos[0] -= document.body.offsetLeft;

    pos[1] -= document.body.offsetTop;        

   }   

}             

if (el.parentNode) {

   parent = el.parentNode;

    } else {

   parent = null;

    }

while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors

   pos[0] -= parent.scrollLeft;

   pos[1] -= parent.scrollTop;

   if (parent.parentNode) {

    parent = parent.parentNode;

   } else {

    parent = null;

   }

}

return {x:pos[0], y:pos[1]};

}

function get(divId)

{

   var pos=getElementPos(divId);

   alert("距左边距离"+ pos.x +",距上边距离"+pos.y);

}

</script>

</head>

<body>

<table width="100%"><tr>

   <td>aaaa</td>

   <td><input type="button" onClick="get('bbbb');" value="获取坐标"> </td>

   <td><div id="bbbb" style="background-color:#CCCCCC">层2</div></td>

</tr></table>

<table width="100%"><tr>

   <td>aaaa</td>

   <td><input type="button" onClick="get('aaa');" value="获取坐标"> </td>

   <td><div id="aaa" style="background-color:#CCCCCC">层1</div></td>

</tr></table>

</body>

</html>

  评论这张
 
阅读(39)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017