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

--------------------------------------------------------------

点此浏览示例文件

--------------------------------------------------------------

Javascript:

1.  
2. <script language="JavaScript" type="text/javascript">
3. <!--

5. // 说明：用 Javascript 获取指定页面元素的位置
6. // 整理：http://www.codebit.cn
7. // 来源：YUI DOM

9. function getElementPos(elementId) {

11. var ua = navigator.userAgent.toLowerCase();
12. var isOpera = (ua.indexOf('opera') != -1);
13. var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof

15. var el = document.getElementById(elementId);

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

18. {

19. return false;

20. }

22. var parent = null;
23. var pos = [];

24. var box;

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);

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;

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. }

72. //-->

73. </script>

从 <http://www.codebit.cn/pub/html/javascript/tip/get_element_position/> 插入