关闭

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

标签: javascriptoperasafarinullfunctionyui
1086人阅读 评论(1) 收藏 举报
分类:
用 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.  



 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:202941次
    • 积分:2630
    • 等级:
    • 排名:第14462名
    • 原创:38篇
    • 转载:75篇
    • 译文:0篇
    • 评论:62条
    最新评论