用 Javascript 获取指定页面元素的位置

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


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


Javascript:

   
   
  1.  
  2. <script language= "JavaScript" type= "text/javascript">
  3. <!--
  4.  
  5. // 说明:用 Javascript 获取指定页面元素的位置
  6. // 整理:http://www.codebit.cn
  7. // 来源:YUI DOM
  8.  
  9. function getElementPos (elementId ) {
  10.  
  11. var ua = navigator. userAgent. toLowerCase ( );
  12. var isOpera = (ua. indexOf ( 'opera' ) != -1 );
  13. var isIE = (ua. indexOf ( 'msie' ) != -1 && !isOpera ); // not opera spoof
  14.  
  15. var el = document. getElementById (elementId );
  16.  
  17. if (el. parentNode === null || el. style. display == 'none' )
  18. {
  19. return false;
  20. }
  21.  
  22. var parent = null;
  23. var pos = [ ];
  24. var box;
  25.  
  26. if (el. getBoundingClientRect ) //IE
  27. {
  28. box = el. getBoundingClientRect ( );
  29. var scrollTop = Math. max (document. documentElement. scrollTop, document. body. scrollTop );
  30. var scrollLeft = Math. max (document. documentElement. scrollLeft, document. body. scrollLeft );
  31.  
  32. return {x:box. left + scrollLeft, y:box. top + scrollTop };
  33. }
  34. else if (document. getBoxObjectFor ) // gecko
  35. {
  36. box = document. getBoxObjectFor (el );
  37. var borderLeft = (el. style. borderLeftWidth )?parseInt (el. style. borderLeftWidth ): 0;
  38. var borderTop = (el. style. borderTopWidth )?parseInt (el. style. borderTopWidth ): 0;
  39.  
  40. pos = [box. x - borderLeft, box. y - borderTop ];
  41. }
  42. else // safari & opera
  43. {
  44. pos = [el. offsetLeft, el. offsetTop ];
  45. parent = el. offsetParent;
  46. if (parent != el ) {
  47. while (parent ) {
  48. pos [ 0 ] += parent. offsetLeft;
  49. pos [ 1 ] += parent. offsetTop;
  50. parent = parent. offsetParent;
  51. }
  52. }
  53. if (ua. indexOf ( 'opera' ) != -1
  54. || ( ua. indexOf ( 'safari' ) != -1 && el. style. position == 'absolute' ) )
  55. {
  56. pos [ 0 ] -= document. body. offsetLeft;
  57. pos [ 1 ] -= document. body. offsetTop;
  58. }
  59. }
  60. if (el. parentNode ) { parent = el. parentNode; }
  61. else { parent = null; }
  62. while (parent && parent. tagName != 'BODY' && parent. tagName != 'HTML' )
  63. { // account for any scrolled ancestors
  64. pos [ 0 ] -= parent. scrollLeft;
  65. pos [ 1 ] -= parent. scrollTop;
  66. if (parent. parentNode ) { parent = parent. parentNode; }
  67. else { parent = null; }
  68. }
  69. return {x:pos [ 0 ], y:pos [ 1 ] };
  70. }
  71.  
  72. //-->
  73. </script>
  74.  



 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值