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


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


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

类别:Javascript | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu