JavaScript获取元素的位置（受分辨率影响）的替代函数

最新推荐文章于 2021-07-08 16:55:20 发布

转载最新推荐文章于 2021-07-08 16:55:20 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/McJeremy/archive/2009/07/06/1517698.html

本文介绍了一种兼容多种浏览器的获取HTML元素位置的方法，包括IE和其他主流浏览器。通过使用getBoundingClientRect等API，并考虑不同浏览器间的差异进行调整，确保在不同分辨率下也能准确获取元素位置。

不知道是受分辨率影响，还是在分辨率影响下，页面出现滚动条时，拖动了滚动条导致scroll值发生改变的影响。

替代函数来自：http://www.cnblogs.com/Caceolod/articles/1312357.html

  1 /*
  2   获取某个元素的位置
  3   @obj 该元素的DOM对象，或该元素的ID
  4 */
  5 /*
  6 下列这个函数虽然能获取到元素的位置，但是在分辨率不同的情况下，位置会不一致。
  7 function getObjectPosition(obj)
  8 {
  9   obj=typeof obj==='string'?getElement(obj):obj;
10   if(!obj)
11   {
12     return;
13   }
14   var position='';
15   if(obj.getBoundingClientRect) //For IEs
16   {
17     position=obj.getBoundingClientRect();
18     return {x:position.left,y:position.top};
19   }
20   else if(document.getBoxObjectFor)
21   {
22     position=document.getBoxObjectFor(obj);
23     return {x:position.x,y:position.y};
24   }
25   else
26   {
27     position={x:obj.offsetLeft,y:obj.offsetTop};
28     var parent=obj.offsetParent;
29     while(parent)
30     {
31        position.x+=obj.offsetLeft;
32        position.y+=obj.offsetTop;
33        parent=obj.offsetParent;
34     }
35     return position;
36   }
37 }
38 */
39 function getObjectPosition(obj)
40 {
41      var ua = navigator.userAgent.toLowerCase();
42      var isOpera = (ua.indexOf( ' opera ' ) != - 1 );
43      var isIE = (ua.indexOf( ' msie ' ) != - 1 && ! isOpera);
44      var el = typeof obj === ' string ' ? getElement(obj):obj;
45      if (el.parentNode === null || el.style.display == ' none ' )
46     {
47          return false ;
48     }
49      var parent = null ;
50      var pos = [];
51      var box;
52      if (el.getBoundingClientRect)     // IE
53     {
54         box = el.getBoundingClientRect();
55          var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
56          var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
57          return {x:box.left + scrollLeft, y:box.top + scrollTop};
58     }
59      else if (document.getBoxObjectFor)
60     {
61         box = document.getBoxObjectFor(el);
62          var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth): 0 ;
63          var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth): 0 ;
64         pos = [box.x - borderLeft, box.y - borderTop];
65     }
66      else
67     {
68         pos = [el.offsetLeft, el.offsetTop];
69         parent = el.offsetParent;
70
71          while (parent)
72         {
73             pos[ 0 ] += parent.offsetLeft;
74             pos[ 1 ] += parent.offsetTop;
75             parent = parent.offsetParent;
76         }
77
78          if (ua.indexOf( ' opera ' ) != - 1 || ( ua.indexOf( ' safari ' ) != - 1 && el.style.position == ' absolute ' ))
79         {
80             pos[ 0 ] -= document.body.offsetLeft;
81             pos[ 1 ] -= document.body.offsetTop;
82         }
83     }
84
85      if (el.parentNode)
86     {
87         parent = el.parentNode;
88     }
89      else
90     {
91         parent = null ;
92     }
93
94      while (parent && parent.tagName != ' BODY ' && parent.tagName != ' HTML ' )
95     {
96         pos[ 0 ] -= parent.scrollLeft;
97         pos[ 1 ] -= parent.scrollTop;
98
99          if (parent.parentNode)
100         {
101             parent = parent.parentNode;
102         }
103          else
104         {
105             parent = null ;
106         }
107     }
108
109      return {x:pos[ 0 ], y:pos[ 1 ]};
110 }

转载于:https://www.cnblogs.com/McJeremy/archive/2009/07/06/1517698.html