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



 

js获取页面元素的位置

一、网页的大小和浏览器窗口的大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。 浏览器窗口的大小,则是指在浏览器窗口中看到的那部...
  • Inuyasha1121
  • Inuyasha1121
  • 2015年10月15日 10:11
  • 2160

用Javascript获取页面元素的位置

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

用JavaScript获取页面元素的位置

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

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

  • fengb4676
  • fengb4676
  • 2008年06月23日 15:22
  • 967

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

原文:http://www.codebit.cn/pub/html/javascript/tip/get_element_position/Javascript:  "JavaScript" type...
  • qsdnet
  • qsdnet
  • 2007年09月26日 17:06
  • 531

Javascript getBoundingClientRect()来获取元素在页面的位置

语法EDIT rectObject = object.getBoundingClientRect(); 返回 返回值是一个DOMRect对象,这个对象是由该元素的 getClientRects...
  • ssisse
  • ssisse
  • 2016年08月25日 10:07
  • 771

JavaScript获取页面大小,滚动条位置,元素位置

//页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {...
  • lovegonghui
  • lovegonghui
  • 2015年09月08日 11:25
  • 1135

JavaScript 获取鼠标及元素在页面上的位置

JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还有哪些属性可以获取鼠标的位置信息?另外,还有哪些能快速获...
  • u013063153
  • u013063153
  • 2016年09月27日 09:44
  • 3954

js获取页面元素和鼠标的点击位置

前端一些页面效果实现时,往往需要操作大量的DOM对象,即要在某个特定的位置显示某个元素。如:在鼠标点击的位置显示,就要获取当前鼠标的位置。1 获取鼠标点击位置JavaScript 获取鼠标点击位置坐标...
  • qq_30051139
  • qq_30051139
  • 2016年12月27日 16:45
  • 818

使用JS取得焦点(focus)元素

原文链接: Get the Focused Element with JavaScript 原文日期: 2014年3月19日 翻译日期: 2014年3月21日 翻译人员: 铁锚 对于良好的用户体验来...
  • renfufei
  • renfufei
  • 2014年03月21日 20:29
  • 14968
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用 Javascript 获取指定页面元素的位置
举报原因:
原因补充:

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