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

原创 2007年09月26日 15:14:00
用 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.  



 

Javascript获取页面元素的绝对位置

一、概念 绝对位置:网页元素的左上角相对于整张网页左上角的坐标 相对位置:相对于浏览器窗口左上角的坐标 二、获取方法 1、每个元素都有offsetTop和offsetLeft属性,表示该元素的...

用Javascript获取页面元素的位置

作者: 阮一峰 日期: 2009年9月14日 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一...
  • e_wsq
  • e_wsq
  • 2012年04月22日 18:02
  • 377

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先,要明确...

用JavaScript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的绝对大小和相对大小 首先,要明确两个基本概念。 一...

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先,要明确两个基本...

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的绝对大小和相对大小 首先,要明确两个基本概念...

用Javascript获取页面元素的位置

用Javascript获取页面元素的位置 分享按钮 作者: 阮一峰 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定...

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。一、网页的大小和浏览器窗口的大小首先,要明确两个基本概念。一张网页的全部面积...
  • ljxkey
  • ljxkey
  • 2013年03月28日 00:57
  • 266

用Javascript获取页面元素的位置

一、网页的大小和浏览器窗口的大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。 浏览器窗口的大小,则是指在浏览器窗口...

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先,要明确两个基本概念。 一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用 Javascript 获取指定页面元素的位置
举报原因:
原因补充:

(最多只允许输入30个字)